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内 容 简 介 


本 书 是 HIMLS 初学 者 极 好 的 入 门 教材 之 一 ， 内 容 通俗 易 懂 、 由 浅 入 深 、 循 序 渐进 。 本 书 内 容 履 盖 
全 面 、 讲 解 详 细 ， 其 中 包括 标签 语义 化 、 标 签 使 用 规范 、 选 择 器 类 型 、 盒 模型 、 标 签 分 类 、 样 式 重 置 、 
CSS 优化 、Photoshop 切 图 处 理 、 整 页 制作 、CSS3 新 样式 、HIMLS 新 功能 等 。 

本 书 具有 四 大 特色 : 一 是 案例 简洁 形象 ， 以 简单 案例 来 剖析 星 涩 的 知识 点 ， 二 是 通过 精简 核心 内 
容 ， 气 弃 老 旧 的 概念 与 语法 ， 突 出 重点 内 容 ， 从 而 节省 读者 的 阅读 时 间 与 学 习 成 本 ; 三 是 本 书 作 者 实 
战 操作 经 验 丰富 ， 本 书 内 容 不 仅仅 局 限于 知识 点 讲解 ， 还 包含 开发 工具 、 开 发 流程 、 整 站 制作 、 精 确 
切 图 等 知识 点 的 详细 介绍 ; 四 是 本 书包 含 更 多 新 版 本 内 容 ， 同 时 对 新 的 CSS3 和 HTMLS5 知识 点 都 有 所 

本 书 适合 初学 者 和 中 等 水 平 的 HTMLS 开发 人 员 ， 以 及 高 等 院 校 、 培 训 学 校 的 师 生 使 用 ,是 牢 牢 掌 
握 HTML5 语言 开发 技术 的 必 读 之 作 。 
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为 什么 要 写 这 样 一 本 书 ? 


当今 的 世界 是 知识 爆炸 的 世界 ， 随 着 科学 技术 与 信息 技术 急速 
地 发 展 ， 新 型 技术 层出不穷 。 但 教科 书 却 不 能 将 这 些 知 识 内 容 及 时 
编 入 ， 致 使 教科 书 的 知识 内 容 出 现 陈旧 不 实用 的 问题 ， 以 致 教材 的 
陈旧 性 与 滞后 性 尤为 突出 。 在 初学 者 还 不 会 编写 一 行 代码 的 情况 
下 ， 就 开始 讲解 算法 ， 这 样 只 会 吓 跑 初学 者 ， 让 初学 者 难以 入 门 。 

IT 行业 不 仅 需 要 理论 知识 , 更 需要 的 是 技术 过 硬 、 综 合 能 力 强 
的 实用 型 人 才 。 因 此 ， 高 校 毕业 生 求 职 时 面临 的 第 一 道门 槛 就 是 技 
能 与 经 验 的 考验 。 由 于 学 校 通常 注重 学 生 的 素质 教育 和 理论 知识 ， 
而 忽略 了 对 学 生 的 实践 能 力 培 养 ， 在 高 校 毕 业 生 求职 时 ， 学 生 常 常 
因 技 术 经 验 不 足 而 被 拒 之 门 外 。 


如 何 解 决 这 一 问题 ? 


为 了 杜绝 这 一 现象 的 发 生 ， 本 书 倡导 的 理念 是 快乐 学 习 ， 实 战 
就 业 。 在 语言 描述 上 力求 准确 、 通 俗 易 懂 ， 在 章节 编排 上 力求 循序 
渐进 ， 在 语法 阐述 时 尽量 避免 术语 和 公式 。 从 项 目 开发 的 实际 需求 
入 手 ， 将 理论 知识 与 实际 应 用 相 结合 ， 旨 在 让 初学 者 能 够 快速 地 成 
长 为 初级 程序 员 ， 并 拥有 一 定 的 项 目 开 发 经 验 ， 从 而 在 职场 中 拥有 
一 个 较 高 的 起 点 。 


























在 瞬息 万 变 的 IT 时 代 ， 一 群 怀揣 梦想 的 人 创办 了 千 锋 教育 ， 
投身 到 IT 培训 行业 。 六 年 来 ， 一 批 批 有 志 青 年 加 入 千 锋 教育 ,为 
了 梦想 笃定 前 行 。 千 锋 教育 秉承 用 良心 做 教育 的 理念 ， 为 培养 “ 顶 
级 IT 精英 ”而 付出 一 切 努力 ， 为 什么 会 有 这 样 的 梦想 ， 我 们 先 来 
听 一 听 用 人 企业 和 求职 者 的 心声 

“现在 符合 企业 需求 的 IT 技术 人 才 非 常 紧 缺 ， 这 方面 的 优秀 人 
才 我 们 会 像 珍宝 一 样 对 待 ， 可 为 什么 至 今 没 有 合格 的 人 才 出 现 ”; 

“面试 的 时 候 ， 用 人 企业 问 能 做 什么 ， 这 个 项 目 如 何 来 实现 ， 
需要 多 长 的 时 间 ， 我 们 当时 都 蒙 了 回答 不 上 来 ”; 

“这 已 经 是 面试 过 的 第 十 家 公司 了 ， 如 果 再 不 行 的 话 ， 是 不 是 
要 考虑 转行 了 ， 难 道 大 学 里 的 四 年 都 白 学 了 ”; 

“这 已 经 是 参加 面试 的 NN 个 求职 者 了 , 为 什么 都 是 计算 机 专业 ， 
当 间 到 项 目 如 何 实现 ， 怎 么 连 思 路 都 没有 呢 ”。 

这 些 心声 并 不 是 个 别 现象 ， 而 是 中 国 社会 目前 的 一 种 普遍 状 
况 。 当 今 的 世界 是 知识 爆炸 的 世界 ， 随 着 科学 技术 与 信息 技术 急速 
地 发 展 ， 而 教科 书 却 不 能 将 这 些 知识 内 容 及 时 编 入 ， 以 致 教材 的 陈 
旧 性 与 滞后 性 日 渐 突出 。 高 校 的 IT 教育 与 企业 的 真实 需求 存在 脱 
节 ， 如 果 高 校 的 相关 教材 不 能 与 时 俱 进 ,那么 毕业 生 将 面临 难以 就 
业 的 困境 。 很 多 用 人 单位 表示 ,高校 毕 业 生 表象 上 知识 丰富 ,但 绝 
大 多 数 在 实际 工作 中 用 之 甚 少 ,甚至 完全 用 不 上 高 校 学 习 阶段 所 学 
知识 。 针 对 上 述 存在 的 问题 ， 国 务 院 也 作出 了 关于 加 快 发 展现 代 
职业 教育 的 决定 。 很 庆幸 , 千 锋 所 做 的 事情 就 是 配合 高 校 达成 产 学 
合作 。 

干 锋 教育 是 致力 于 打造 I 职 业 教育 全 产业 链 人 才 的 服务 平台 ， 
在 全 国 拥有 数 十 家 分 校 、 数 百名 讲师 。 我 们 坚持 以 教学 为 本 的 方针 ， 
采用 面对面 教学 的 方式 ,传授 企业 实用 技能 。 教 学 大 纲 实时 紧 跟 企 
业 需 求 和 全 国 一 体 化 的 就 业 体系 。 千 锋 的 价值 观 是 “做 真实 的 自己 ， 
用 良心 做 教育 ”。 
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针对 高 校 教 师 的 服务 : 

(1) 千 锋 教育 基于 近 七 年 来 的 教育 培训 经 验 ， 精 心 设计 了 包含 “教材 + 授课 资源 + 考 
试 系统 + 测试 题 + 辅 助 案例 ”的 教学 资源 包 , 节约 教师 的 备课 时 间 , 缓解 教师 的 教学 压力 ， 

(2) 本 书 配套 代码 视频 ， 索 取 网 址 : http://www.codingke.com/。 

(3 ) 本 书 配备 了 千 锋 教育 优秀 讲师 录制 的 教学 视频 ， 按 本 书 知识 结构 体系 部 署 到 了 
教学 辅助 平台 ( 扣 丁 学 堂 ) 上 ， 可 以 作为 教学 资源 使 用 ， 也 可 以 作为 备课 参考 。 

高 校 教师 如 需 索 要 配套 教学 资源 ， 请 关注 ( 扣 丁 学 堂 ) 师资 服务 平台 ， 扫 描 下 方 二 
维 码 关注 微 信 公众 平台 索取 。 





针对 高 校 学 生 的 服务 : 

(1) 学 IT 有 疑问 ， 就 找 千 问 千 知 。 千 问 千 知 是 一 个 有 问 必 答 的 IT 社区 ， 平 台 上 的 
专业 答疑 辅导 教师 承诺 工作 时 间 三 小 时 内 答复 您 在 学 习 IT 中 直到 的 专业 问题 .读者 也 可 
以 通过 扫描 下 方 的 二 维 码 ， 关 注 千 问 千 知 微 信 公 众 平台 ， 浏 览 其 他 学 习 者 在 学 习 中 分 享 
的 问题 与 收获 。 

(2) 学 习 太 枯燥 , 想 了 解 其 他 学 校 的 伙伴 都 是 怎样 学 习 的 ? 您 可 以 加 入 扣 丁 俱乐部 。 
“ 扣 丁 俱乐部 ”是 千 锋 教 育 联合 各 大 校园 发 起 的 公益 计划 ， 专 门面 向 对 IT 有 兴趣 的 大 学 
生 提 供 免费 的 学 习 资 源 和 问答 服务 ， 已 有 超过 30 多 万 名 学 者 获 益 。 

就 业 难 ， 难 就 业 ， 千 锋 教育 让 就 业 不 再 难 ! 











关于 本 教材 


本 教材 可 作为 高 等 院 校本 科 、 专 科 计 算 机 相关 专业 的 HIML5 入 门 教材 ， 其 中 包含 


才 
中 


VIL 


了 千 锋 教育 HTML5 基础 全 部 的 课程 内 容 ， 是 一 本 适合 广大 计算 机 编程 爱好 者 的 优秀 


读物 。 
抢 红 包 


本 书 配套 源 代 码 、 习 题 答案 的 获取 方法 : 添加 小 千 QQ 号 或 微 信号 2133320438。 
注意 ! 小 千 会 随时 发 放 “ 助 学 金 红 包 ”。 


致谢 


千 锋 教育 HTMLS 教学 团队 将 多 年 积累 的 教学 实战 案例 进行 整合 ， 通 过 反复 地 写 稿 
与 修改 最 终 完成 了 这 本 著作 。 另 外 , 多 名 院 校 老师 也 参与 了 本 书 的 部 分 编写 与 指导 工作 。 
除 此 之 外 ， 千 锋 教育 500 多 名 学 员 也 参与 到 了 教材 的 试 读 工作 中 ， 他 们 以 初学 者 的 角度 
为 本 书 提 供 了 许多 宝贵 的 修改 意见 与 建议 ， 在 此 一 并 表示 衷心 的 感谢 。 


千 锋 学 科 


千 锋 学 科 主 要 包括 HTMLS5 前 端 开发 、Java EE 分 布 式 开发 、Python 全 栈 + 人 工 智能 、 
全 链 路 ULUE 设计 、 智 能 物 联网 + 嵌入 式 、360 网 络 安全 学 院 、 大 数据 + 人 工 智能 培训 、 
全 栈 软件 测试 、PHP 全 栈 + 服务 器 集群 、 云 计算 + 信息 安全 、Unity 游戏 开发 、 区 块 链 。 


千 笑 核 区 


北京 | 大连 | 广州 | 成 都 | 杭州 | 长 沙 | 哈尔滨 | 南京 | 上 海 | 深圳 | 武汉 | 郑 
州 | 西安 | 青岛 | 重庆 | 太原 


意见 有 反馈 


在 本 书 的 编写 过 程 中 ， 虽 然 力求 完美 ， 但 难免 有 一 些 不 足 之 处 ， 欢 迎 各 界 专家 和 读 
者 朋友 们 提出 宝贵 意见 ， 联 系 方式 : huyaowen@1000phone.com. 


千 锋 教 育 高 教 产品 研发 部 
2018 年 6 月 
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Web 前 端 技术 简介 


本 章 学 习 目 标 

。 了 解 Web 前 端 技术 和 相关 行业 信息 ; 

。 了 解 Web 前 端 开发 工具 ; 

。 理解 HTML 基本 原理 。 

互联 网 中 的 网 页 大 多 数 都 是 使 用 HTML 格式 展示 给 浏览 者 ， 使 HTML 成 为 目前 最 
流行 的 网 页 制作 语言 。 为 了 使 网 页 具有 更 好 的 扩展 性 和 用 户 体验 ，CSS 样式 表 在 网 页 设 
计 中 有 着 重要 的 地 位 。 在 学 习 HTML 和 CSS 之 前 ， 需 要 了 解 一 些 基本 的 互联 网 相关 知 
识 。 本 章 将 从 Web 前 端 概述 、Web 前 端 开发 工具 和 HTML 入 门 基 本 知识 开始 ， 带 领 读 
者 进行 Web 开发 之 旅 。 


1.1 Web 前 端 概 述 


Web 前 端 即 指 大 家 平常 上 网 浏览 的 网 页 ， 如 上 网 浏览 新 闻 、 查 询 快 递 信 息 、 淘 宝 购 
物 等 都 是 在 浏览 网 页 。 但 网 页 制作 还 需要 了 解 与 网 页 相关 的 基本 概念 ， 下 面 将 对 Web 前 
端的 相关 概念 进行 详细 讲解 。 


1.1.1 初 识 Web 前 端 


1991 年 8 月 6 日 , 来 自 欧洲 核子 研究 中 心 的 科学 家 Tim Bemers-Lee, 启动 了 世界 上 
第 一 个 可 以 正式 访问 的 网 站 (http: /info. cern. ch/)， 从 此 人 类 宣布 了 万 维 网 时 代 的 到 来 。 
随 着 互联 网 的 飞速 发 展 ， 网 站 开发 人 员 也 变 得 炽 手 可 热 。 

Web 前 端 开发 是 从 网 页 演变 而 来 ， 名 称 上 有 明显 的 时 代 特 征 。 随 着 用 户 体验 要 求 越 
来 越 高 ， 前 端 开发 的 技术 难度 越 来 越 大 ，Web 前 端 开发 这 个 职业 也 从 设计 和 制作 不 分 的 
局 面 中 独立 出 来 。 

早期 的 前 端 其 实 就 是 Table 布局 ， 后 来 发 展 到 DIV+CSS 网 站 重 构 ， 再 到 JavaScript 
逐渐 成 为 Web 前 端 开发 的 语言 以 及 Web2.0 的 出 现 ， 每 个 阶段 都 涌现 出 相应 的 产品 ， 如 
SNS、 博 客 、 微 博 等 。 随 着 人 们 对 网 页 需求 的 不 断 增 大 ，Web 前 端 技术 也 正 加 速 地 发 展 。 
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Web 开发 职位 可 分 为 UI 设计 师 (网 页 设计 师 )、Web 前 端 工程 师 、Web 后 端 工程 师 、 
数据 库 工 程 师 。 下 面 来 了 解 一 下 这 四 大 职位 的 分 工 。 

。 首先 由 UI 设计 师 根据 产品 的 需求 做 出 网 站 效果 图 , 然后 交付 给 Web 前 端 工程 师 
进行 图 片 切割 和 网 页 制作 。 

。 数据 库 工程 师 负责 把 网 站 数据 进行 存储 和 优化 处 理 。 

。 Web 后 端 工程 师 负 责 对 网 站 数据 进行 增删 改 查 等 逻辑 处 理 , 并 将 操作 的 数据 返 给 
Web 前 端 工程 师 进行 数据 的 交互 与 显示 。 

。 Web 前 端 工程 师 能 充分 理解 项 目 需求 和 设计 需求 ， 并 与 UI 设计 师 、Web 后 端 工 
程 师 紧密 合作 ， 做 出 高 质量 的 网 站 展示 层 ， 为 用 户 呈 现 出 最 好 的 界面 交互 体验 。 


网 站 开发 模式 如 图 1.1 所 示 。 
XX 
SS yy 
加 


1.1 网 站 开发 模式 


有 一 句 话 非 常 形象 地 形容 了 Web 前 端 工程 师 的 特点 ,“ 它 是 游 走 在 二 次 元 与 二 进 制 
之 间 的 魔法 师 !”。 


1.1.2 Web 前 端 开发 的 三 大 核心 技术 








W3C 组 织 ， 即 万 维 网 联盟 ,创建 于 1994 年 ， 是 Web 技术 领域 最 具 权 威 和 影响 力 的 
国际 中 立 性 技术 标准 机 构 。W3C 专门 负责 制定 网 页 相关 的 标准 ，Web 前 端的 相关 技术 
都 是 基于 W3C 标准 实现 的 。 

下 面 来 介绍 下 Web 前 端 开发 所 包括 的 三 大 核心 技术 一 一 HTML 语言 、CSS 语言 、 


JavaScript 语言 。 





1， HTML 语言 


HTML 全 称 “HyperText Markup Language”， 中 文 解释 为 “ 超 文 本 标记 语言 ”， 它 
是 制作 网 页 的 标准 语言 。“ 超 文本 ”就 是 指 页 面 内 可 以 包含 图 片 、 链 接 ， 甚 至 音乐 、 程 
序 等 非 文 字 元 素 。 超 文本 标记 语言 的 结构 包括 “ 头 ” 部 分 (Head) 和 “主体 ”部 分 (Body)， 
其 中 “ 头 ” 部 提供 关于 网 页 的 信息 ，“ 主 体 ” 部 分 提供 网 页 的 具体 内 容 。 

2， CSS 语言 


CSS 全 称 “Cascading Style Sheet”， 中 文 解释 为 “ 层 又 样式 表 ”， 它 是 一 种 用 来 表 
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现 HTML 或 XML 等 文件 样式 的 计算 机 语言 。CSS 不 仅 可 以 静态 地 修饰 网 页 ， 还 可 以 配 
合 各 种 脚本 语言 动态 地 对 网 页 各 元 素 进行 格式 化 。CSS 能 够 对 网 页 中 元 素 位 置 的 排版 进 
行 像素 级 精确 控制 ， 支 持 几乎 所 有 的 字体 字号 样式 ， 并 拥有 对 网 页 对 象 和 模型 样式 进行 
编辑 的 能 力 。 





3. JavaScript 语言 


JavaScript 是 一 种 属于 网 络 的 脚本 语言 ， 已 经 被 广泛 地 用 于 Web 应 用 开发 ， 常 用 来 
为 网 页 添加 各 式 各 样 的 动态 功能 ， 为 用 户 提供 更 流畅 美观 的 浏览 效果 。 它 的 解释 器 被 称 
为 JavaScript 引擎 ， 属 于 浏览 器 的 一 部 分 ， 因 此 JavaScript 代码 由 浏览 器 边 解 释 边 执行 。 
通常 JavaScript 脚本 通过 幅 入 在 HTML 中 的 方式 来 实现 自身 的 功能 。 

Web 前 端 三 大 核心 技术 就 像 板 使 的 三 条 腿 ， 缺 一 不 可 。 三 大 核心 技术 之 间 的 联系 如 
图 1.2 所 示 。 


前 端 开发 


和 


1.2 三 大 核心 技术 之 间 的 联系 





W3C 组 织 规定 ，Web 标准 需要 将 网 页 的 结构 、 样 式 和 行为 三 者 进行 分 离 。HTML+ 
CSS+JavaScript 本 质 上 构成 一 个 MVC 框架 ， 即 HTML 用 于 描述 网 页 的 结构 (Model) ， 
CSS 用 于 描述 网 页 的 样式 (View) ，JavaScript 用 于 描述 网 页 的 行为 即 调度 数据 和 实现 
某 种 展现 逻辑 (Controller) 。 本 书 主要 讲解 HIML+CSS 。 

用 一 个 盖 房 子 的 例子 来 描述 下 三 者 之 间 的 关系 。 首 先 需 要 把 房子 的 地 基 和 结构 搭建 
好 ， 有 一 个 良好 的 结构 (HIML) 。 然 后 给 房子 刷 上 油漆 和 添加 窗户 ， 对 房子 样式 进行 
美化 (CSS) 。 最 后 给 房子 添加 电梯 和 地 暖 , 与 住户 进行 一 些 行为 上 的 交互 (JavaScript) ， 
这 样 房子 才 算 搭建 完毕 。 下 面 来 看 一 下 在 Web 前 端 中 三 者 的 体现 效果 , 如 图 1.3 一 图 1.5 
所 示 。 


前 端 技术 前 端 技 直 
图 1.3 仅仅 使 用 HTML 的 文字 图 1.4 在 HIML 基础 上 加 入 CSS 样式 


1.5 加 入 JavaScript 鼠标 滑 入 效果 
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1.2 ”Web 前 端 开发 工具 


工 欲 善 其 事 必 先 利 其 器 。 在 HTML+CSS 开发 过 程 中 ， 需 要 先 来 选择 适合 的 相关 开 
发 工具 。HTML+CSS 开发 过 程 中 主要 涉及 到 三 大 类 工具 : 浏览 器 、 网 页 编辑 器 、 切 图 软 
件 ， 本 节 就 来 介绍 这 三 大 类 工具 。 


1.2.1 浏览 器 
浏览 器 是 网 页 的 运行 平台 , 是 可 以 把 HIML 文件 展示 在 其 中 ,供用 户 进行 浏览 的 一 
种 软件 。 目 前 主流 的 浏览 器 有 正 、Chrome、Firefox、Safari、Opera 等 ， 如 图 1.6 所 示 。 


由 于 某 些 因素 , 这 些 浏览 器 没有 完全 采用 统一 的 Web 标准 ,或 者 说 不 同 的 浏览 器 对 同一 
个 CSS 样式 有 不 同 的 解析 ， 这 就 导致 了 同样 的 页 面 在 不 同 的 浏览 器 下 显示 效果 可 能 
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IE 浏 览 器 Chrome 浏 览 器 Firefox 浏 览 器 
Safari 浏 览 器 Opera 浏 览 器 
1.6 主流 浏览 器 


不 同 用 户 使 用 的 浏览 器 可 能 不 同 ， 因 此 制作 网 页 时 ， 需 要 保证 该 网 页 可 以 兼容 所 有 
的 主流 浏览 器 。 关 于 网 页 制作 中 的 兼容 性 问题 及 其 解决 方案 , 会 在 后 面 的 章节 进行 讲解 。 
下 面 介绍 几 种 主流 浏览 器 。 


1. 亚 浏览 


下 是 ntemet Explorer 的 简称 ， 它 是 微软 公司 推出 的 一 款 网 页 浏览 器 ， 采 用 Trident 
内 核实 现 ， 有 6.0、7.0、8.0、9.0、10.0、11.0 等 版 本 。 在 正 7 以 前 ， 中 文 直译 为 “网 络 
探 路 者 ”， 但 在 正 7 以 后 官方 便 直接 称 为 “IE 浏览 器 ”。 由 于 一 些 用 户 仍 然 在 使 用 低 版 本 
的 浏览 器 ， 因 此 在 制作 网 页 时 ， 一 般 也 需要 兼容 低 版 本 的 浏览 器 。 一 些 其 他 的 浏览 器 也 
是 基于 正 内 核 的 ， 如 360 安全 浏览 器 、 搜 狗 浏览 器 等 ， 只 要 兼容 正 浏览 器 ， 这 些 基于 
IE 内 核 的 浏览 器 也 都 兼容 。 
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2. Chrome 浏览 


Chrome 浏览 器 一 般 指 Google Chrome, Google Chrome 是 一 款 由 Google 公司 开发 的 
设计 简单 、 高 效 的 Web 浏览 器 ， 采 用 JavaScript 引擎 ， 可 快速 运行 复杂 的 大 型 网 站 ， 从 
而 降低 浏览 者 访问 的 等 待 时 长 。 该 浏览 器 基于 其 他 开源 软件 撰写 ， 采 用 Webkit、Blink 
内 核实 现 ， 目 标 是 提升 稳定 性 、 速 度 和 安全 性 ， 并 创造 出 简单 且 有 效率 的 使 用 者 界面 。 
本 书 运行 环境 采用 Chrome 浏览 器 ， 版 本 为 54.0.2840.5， 如 图 1.7 所 示 。 


EI Ea 








Google 





图 1.7 Chrome 浏览 器 首页 


3，Firefox 浏览 


Firefox 浏览 器 一 般 指 Mozilla Firefox， 中 文 俗称 “火狐 ” 是 Mozilla 公司 出 品 的 一 
款 自 由 及 开放 源 代码 Web 浏览 器 ,采用 Gecko 内 核实 现 ,支持 多 种 操作 系统 ,如 Windows、 
MacOSX 及 GNU/Linux 等 。 


4，Safari 浏览 器 


Safari 浏览 器 是 苹果 公司 出 品 的 用 于 苹果 计算 机 操作 系统 Mac OS X 中 的 浏览 器 , 采 
用 Webkit 内 核实 现 ， 使 用 了 KDE 的 KHTML 作为 浏览 器 的 运算 核心 。 无论 在 Mac 还 是 
PC 上 运行 时 ，Safari 都 可 提供 极致 愉悦 的 网 络 体验 方式 。 


5S，Opera 浏览 器 


Opera 浏览 器 是 一 款 挪威 Opera Software ASA 公司 制作 的 支持 多 页 面 标签 式 浏览 的 
Web 浏览 器 , 采用 Presto 内 核实 现 ， 它 是 跨 平台 浏览 器 , 可 以 在 Windows、Mac 和 Linux 
三 个 操作 系统 平台 上 运行 。 

注 : 浏览 器 内 核 负 责 对 网 页 语法 进行 解释 并 这 染 〈 显 示 ) 网 页 。 通 常 所 谓 的 浏览 器 
内 核 也 就 是 浏览 器 所 采用 的 演 染 引擎 ， 演 染 引擎 决定 了 浏览 器 如 何 显 示 网 页 的 内 容 以 及 
页 面 的 格式 信息 。 
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1.2.2 ”网 页 编辑 器 


网 页 编辑 器 是 书写 HTML、CSS 等 代码 的 工具 软件 。 一 般 常 用 的 网 页 编辑 器 有 
Dreamweaver、Sublime Text、WebStorm、Hbulider 等 ， 如 图 1.8 所 示 为 常用 的 网 页 编辑 
器 的 图 标 。 本 教材 采用 Dreamweaver 网 页 编辑 器 , 版 本 为 CS6。 Dreamweaver 简称 “DW”， 
具备 完美 的 代码 提示 功能 和 强大 的 辅助 操作 ， 因 此 它 非常 容易 上 手 ， 是 一 款 适 合 初学 者 


学 习 和 使 用 的 网 页 编辑 器 。 
© 


Dreamweaver Sublime Text 
Webstorm Hbulider 


图 1.8 常用 网 页 编辑 器 


接 下 来 讲解 如 何 使 用 Dreamweaver 网 页 编辑 器 进行 网 页 编程 ,软件 的 安装 不 再 介绍 ， 
直接 讲解 软件 安装 后 如 何 使 用 。 

运行 DW 软件 ， 进 入 软件 界面 ， 选 择 菜单 栏 中 的 【文件 】 一 【新 建 】 打开 【新 建 
文档 】 窗 口 ， 如 图 1.9 所 示 ， 在 【文档 类 型 】 下 拉 列 表 中 选择 HIML5， 单 击 【 创 建 】 按 
钮 ， 即 可 创建 一 个 空白 的 HTML 文档 ， 如 图 1.10 所 示 。 
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图 1.9 【新 建文 档 】 窗 口 
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图 1.10 空白 的 HTML 文档 


为 了 让 初学 者 更 好 地 使 用 DW 工具 ， 需 要 对 DW 进行 一 些 初始 化 设置 ， 具 体 如 下 。 
1 工作 区 布局 设置 
运行 DW 软件 ， 进 入 软件 界面 ， 在 菜单 栏 中 选择 【窗口 】 一 【工作 区 布局 (w)】 一 
【经 典 】 命 令 ， 将 布局 设置 成 统一 的 模式 ， 如 图 .11 所 示 。 


区 





DD) 
bn- 


[a dada 


aD. 
De 

a 

Dr ec 


图 1.11 初始 化 工作 区 布局 


Om 从 入 门 到 精通 


2， 必 备 面 板 


设置 经 典 模式 后 ， 需 要 调 出 三 个 常用 的 面板 ， 为 此 分 别 选中 菜单 栏 【 窗 口 】 菜 单 下 
的 【插入 【属性 】、【 文 件 】 三 个 命令 ， 如 图 1.12 所 示 。 











图 1.12 初始 化 必 备 面板 


3， 新 建 默认 文档 设置 


选择 菜单 栏 中 【编辑 】 一 【首选 参数 】(Ctrl+U)， 选 中 左 侧 【分 类 】 中 的 【新 建文 
档 】 右边 就 会 出 现 相应 的 设置 。 选 择 最 常用 的 HTML 文档 类 型 和 编码 类 型 ， 本 书 设置 
为 HTML5， 如 图 1.13 所 示 。 





jc (规范 分 解 ， 后 跟 规 范 合成) 





图 1.13 默认 文档 设置 


新 建文 档 的 默认 参数 设置 好 以 后 , 新 建 HTML 文档 时 ，DW 就 会 按照 默认 文档 设置 
直接 生成 所 需 的 代码 。 
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4， 浏览 器 设置 


初学 者 计算 机 必 备 下 浏览 器 和 Chrome 浏览 器 , 建议 将 DW 的 默认 预览 浏览 器 设置 
为 “Chrome 浏览 器 ” 快捷 键 F12 是 使 用 主 浏览 器 预览 网 页 , 一 般 把 正 浏览 器 设 为 次 浏 
览 器 ， 按 快捷 键 Ctl+F12， 如 图 1.14 所 示 。 











图 1.14 默认 浏览 器 设置 
S， 代码 提示 


为 了 加 快 写 代 码 的 速度 ， 会 用 到 代码 提示 ，DW 中 就 有 强大 的 代码 提示 的 功能 ， 只 
需 在 【首选 参数 】 对 话 框 中 设置 代码 提示 ， 选 择 【代码 提示 】 选 项 ， 然 后 选中 【结束 标 
签 】 选 项 中 的 第 二 项 ， 单 击 【 确 定 】 按 钮 即 可 ， 代 码 提示 设置 如 图 1.15 所 示 。 








1.15 ”代码 提示 设置 


70 TML5 从 入 门 到 精通 


1.2.3 切 图 软件 


切 图 软件 是 对 UI 设计 师 设计 出 的 效果 图 进行 切 图 操作 ， 也 可 以 对 网 页 中 涉及 到 图 
片 进行 修改 等 处 理 。 常 用 的 切 图 软件 有 Photoshop 和 Fireworks 两 种 。 常 用 切 图 软件 的 图 
标 如 图 1.16 所 示 ， 本 教材 采用 Photoshop 进行 切 图 ， 版 本 为 CS5。Photoshop 简称 “PS 7” 
它 是 一 款 专业 性 很 强 的 图 片 处 理 软件 ， 在 第 9 章 中 将 详细 地 学 习 如 何 利用 Photoshop 进 
行 网 页 的 切 图 操作 。 





Photoshop Fireworks 


1.16 ”常用 切 图 软件 的 图 标 


1.3 HTML 入 门 


1.3.1 什么 是 HTML 


HTML 是 HyperText Markup Language 的 缩写 , 即 超 文本 标记 语言 , 是 一 种 用 来 制作 
超 文本 文档 的 简单 标记 语言 。 接 下 来 将 带领 读者 从 语言 、 超 文本 、 标 记 三 个 部 分 理解 


HTML 是 一 种 编程 语言 ， 有 指定 的 语法 规则 。 超 文本 传输 协议 规定 了 浏览 器 在 运行 
HTML 文档 时 所 遵循 的 规则 和 进行 的 操作 。 协 议 的 制定 使 浏览 器 在 运行 超 文 本 时 有 了 统 
一 的 规则 和 标准 。 用 HTML 编写 的 超 文本 文档 称 为 HTML 文档 ， 它 能 独立 于 各 种 操作 
系统 平台 。 自 1990 年 以 来 HIML 就 一 直 被 用 作 WWW (是 World Wide Web 的 缩写 ， 也 
可 简写 为 Web、 中 文 叫做 万 维 网 ) 的 信息 表示 语言 ， 使 用 HTML 语言 描述 的 文件 ， 需 要 
通过 Web 浏览 器 HITP 显示 出 效果 。 


2. 超 文本 


所 谓 超 文本 是 可 以 加 入 图 片 、 声音、 动画 、 影 视 等 内 容 的 文本 。 事 实 上 每 一 个 HIML 
文档 都 是 一 种 静态 的 网 页 文件 ， 这 个 文件 里 面包 含 了 HIML 指令 代码 , 这 些 指令 代码 并 
不 是 一 种 程序 语言 ， 它 只 是 一 种 排版 网 页 中 资料 显示 位 置 的 标记 结构 语言 ， 简 单 且 易学 
易 懂 。 
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HTML 的 普遍 应 用 就 是 通过 单 击 从 一 个 主题 跳 转 到 另 一 个 主题 ， 从 一 个 页 面 跳 转 到 
另 一 个 页 面 与 世界 各 地 主机 的 文件 链接 ， 直 接 获取 相关 的 主题 。 
(1) HTML 可 以 通过 图 片 格式 和 文字 格式 的 设计 来 实现 丰富 多 彩 的 风格 。 


<IMG SRC=" 文 件 名 "> 
<FONT SIZE="+5 " COLOR="#00FFFF"> 文 字 </FONT> 


(2) 通过 HTML 可 以 实现 页 面 之 间 的 跳 转 。 
<A HREF=" 文 件 路 径 /文件 名 "></A> 
(3) 通过 HTML 可 以 展现 多 媒体 的 效果 。 


<EMBED SRC=" 音 乐 地 址 " AUTOSTART=true> 
<EMBED SRC=" 视 频 地 址 " AUTOSTART=true> 


从 上 面 可 以 看 到 HTML 超 文本 文件 时 需要 用 到 的 一 些 标签 。 
3， 标记 


对 于 刚刚 接触 超 文 本 的 读者 来 说 ， 一 些 用 “<” 和 “>” 插 起 来 的 句子 可 能 很 难 被 理 
解 ， 它 们 被 称 为 标记 ， 也 称 标签 ， 是 用 来 划分 网 页 的 元 素 ， 以 形成 文本 的 布局 、 文 字 的 
格式 及 五 彩 缤纷 的 画面 。 标 签 通过 指定 某 块 信息 为 段落 或 标题 等 来 标识 文档 某 个 部 件 。 
在 HIML 中 每 个 用 作 标 签 的 符号 都 是 一 条 命令 , 它 会 告诉 浏览 器 如 何 显示 文本 。 这 
些 标签 均 由 “<” 和 “>” 符 号 以 及 一 个 字符 串 组 成 。 如 <head>、<body> 等 。 而 浏览 器 的 
功能 是 对 这 些 标记 进行 解释 ， 显示 出 文字 、 图 像 、 动 画 、 播 放声 音 。 这 些 标签 符号 用 “< 
标签 名 字 属性 >” 来 表示 。 标 签 分 为 单 标签 和 双 标 签 两 大 类 ， 具 体 介 绍 如 下 : 
。 单 标签 指 的 是 只 存在 一 个 标签 的 写法 ， 如 <meta>、<input> 等 。 
。 双 标 签 指 的 是 存在 一 对 标签 的 写法 ， 如 <head></head>、<body></body> 等 。 注 意 
在 双 标 签 中 第 一 个 标签 称 为 起 始 标签 ,第 二 个 标签 称 为 结束 标签 ， 结 束 标 签 需要 
在 左 尖 括号 后 添加 一 个 关闭 符 “/”。 
HTML 只 是 一 个 纯 文本 文件 。 创 建 一 个 HTML 文档 ， 需 要 HTML 编辑 器 和 Web 浏 
览 器 两 个 工具 。HTML 编辑 器 是 用 于 生成 和 保存 HTML 文档 的 应 用 程序 。Web 浏览 器 用 
来 打开 Web 网 页 文件 ， 提 供 查 看 Web 资源 的 客户 端 程序 。 


1.3.2 HTML 基本 结构 


HTML 文档 是 由 一 系列 的 元 素 和 标签 组 成 。 元 素 名 不 区 分 大 小 写 ，HIML 用 标签 来 
规定 元 素 的 属性 和 它 在 文件 中 的 位 置 ，HTML 文档 分 为 头 部 和 主体 两 部 分 ， 在 文档 头 部 
对 文档 进行 一 些 必要 的 定义 , 主体 部 分 是 文档 要 显示 的 信息 。 其 基本 结构 如 例 1-1 所 示 。 

【 例 1-1】 HTML 文档 的 基本 结构 。 


<!DOCTYPE HTML> 
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<html> 

<head> 
<meta charset="utf-8"> 
<title> 标 题 </title> 

</head> 

<body> 
内 容 

</body> 

0 </html> 


行 结果 如 图 1.17 所 示 。 


Poo MwN 


(a 











1.17 HTML 文档 的 运行 结果 


一 个 HTML 文档 基本 结构 主要 由 文档 声明 (<!DOCTYPE HTML>)、HTML 文档 
(<html>)、 文 档 头 部 〈<head>) 和 文档 主体 〈<body>) 四 部 分 组 成 。 接 下 来 将 具体 介绍 
这 四 个 部 分 的 内 容 。 


1， 文档 声明 


<!DOCTYPE> 声 明 必 须 是 HTML 文档 的 第 一 行 ， 位 于 <html> 标签 之 前 。 
<!IDOCTYPE> 声明 不 是 HTML 标签 , 它 用 于 向 浏览 器 说 明 当前 文档 是 属于 哪 种 HTML 
或 XHTML 标准 规范 。 必 须 在 开头 处 使 用 <!DOCTYPE> 为 所 有 的 XHTML 文档 指定 
XHTML 版 本 和 类 型 ， 这 样 浏览 器 才能 将 网 页 作为 有 效 的 XHTML 文档， 并 按照 指定 文 
档 类 型 进行 解析 。 

<!DOCTYPE> 声 明 与 浏览 器 的 兼容 性 相关 ， 如 果 没 有 <!DOCTYPE>， 就 由 浏览 器 决 
定 如 何 展示 HTML 页 面 。 这 时 , 不 同 的 浏览 器 可 能 会 有 多 种 显示 效果 , 这 样 是 不 允许 的 。 

2，HTML 文档 

<html> 标 签 位 于 <!IDOCTYPE> 声 明之 后 ， 作 用 相当 于 在 告知 浏览 器 这 是 一 个 HTML 
文档 ，<html></html> 标 签 限定 了 文档 的 开始 点 和 结束 点 ， 其 中 <html> 表 示 网 页 的 开始 ， 


</html> 表 示 网 页 结束 ， 网 页 需要 展示 的 所 有 内 容 都 应 该 写 到 <html></html> 标 签 的 内 部 ， 
<html> 标 签 也 被 称 为 根 标 签 ， 指 最 外 层 的 意思 。 


3， 文档 的 头 部 


<head></head> 用 于 定义 HTML 文档 头 部 信息 。 文 档 头 部 内 的 标签 如 图 1.17 所 示 。 
在 <html> 标 签 之 后 , 用 来 封装 其 他 位 于 文档 头 部 的 标签 , 如 表 1.1 中 的 标签 。 一 个 HTML 
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文档 只 能 有 一 对 <head></head> 标 签 , 绝 大 多 数 文 档 头 部 包含 的 数据 都 不 会 真正 作为 内 容 
显示 在 页 面 中 。 


表 1.1 文档 头 部 内 的 标签 











<title> 定义 了 文档 的 标题 

<base> 定义 了 页 面 链接 标签 的 默认 链接 地 址 
<link> 定义 了 一 个 文档 和 外 部 资源 之 间 的 关系 
<meta> 定义 了 HTML 文档 中 的 元 数据 
<script> 定义 了 客户 端的 脚本 文件 

<style> 定义 了 HTML 文档 的 样式 文件 





上 例 中 <meta charset="utf-8"> 指 定 网 页 的 编码 方式 为 utf-8。utf-8 是 一 种 网 页 编码 规 
范 ， 可 以 统一 页 面 显 示 中 文 简体 、 繁 体 及 其 他 语言 (如 英文 、 日 文 、 韩 文 ;， 这 样 网 页 就 
不 会 出 现 乱码 的 情况 ， 属 于 国际 通用 编码 方式 。 


4. 文档 的 主体 


<body></body> 包 含 文档 要 展示 的 所 有 内 容 ， 也 称 主体 标签 ， 网 页 中 显示 的 文本 、 
超 链接 、 图 像 、 表 格 和 列表 等 信息 都 必须 在 <body> 内 ， 如 图 1.17 中 的 内 容 ， 就 是 <body> 
内 的 信息 ，<body> 中 的 内 容 是 最 终 展示 给 用 户 的 。 

HTML 语言 是 不 区 分 大 小 写 的， 但 建议 文档 声明 采用 大 写 方式 ， 其 他 部 分 都 采用 小 
写 方式 。 


1.3.3 ”运行 第 一 个 HTML 程序 


(1) 新 建 一 个 空白 HIML 文档 ， 单 击 【 代 码 】 按 钮 ， 默 认为 HTML 基本 结构 。 代 
码 视图 如 图 1.18 所 示 。 
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1d0ctype htmi> | 
<htmi> 

<head> 

meta charset="utf-a"> 

<titie> 无 标题 文档 /title> 


</head> 
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图 1.18 代码 视图 


(2) 修改 <title> 和 <body> 中 的 内 容 ， 按 Ctrl+S 快捷 键 ， 进 行文 件 的 保存 ， 文 件 后 级 
名 为 .html 格式， 如 图 1.19 所 示 。 
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图 1.19 保存 成 .html 文件 的 对 话 框 


(3) 单 击 “ 在 浏览 器 中 预览 /调试 ” 按钮， 选择 “chrome.exe 浏览 器 ”命令 进行 预览 ， 
或 者 通过 双击 .html 文件 进行 预览 。 在 Chrome 浏览 器 中 预览 效果 如 图 1.20 所 示 。 
fa [0 | © EP HEHE 


< 





到 二 


第 
下 
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四 
2 
四 

中 


1.20 在 Chrome 浏览 器 中 预览 效果 
到 此 本 教材 的 第 一 个 网 页 就 运行 成 功 了 ， 可 以 试 着 改变 <title> 和 <body> 中 的 内 容 ， 
然后 重新 保存 页 面 并 刷新 浏览 器 进行 预览 。 
1.3.4 ”HTML 注释 


在 编写 HTML 代码 时 , 经 常 要 在 一 些 关键 代码 旁 做 一 下 注释 , 这 样 做 的 好 处 有 很 多 ， 
如 : 方便 理解 代码 、 方 便 查 找 相关 代码 或 是 方便 项 目 组 里 的 其 他 程序 员 来 了 解 你 所 写 的 
代码 ， 还 可 以 方便 自己 以 后 对 代码 的 理解 和 修改 。 语 法 格式 如 下 : 


<! 一 -注释 的 内 容 --> 


1 Web 前 端 技术 简介 715 


“<!--” 表 示 注 释 的 开始 ,“-->” 表 示 注 释 的 结束 。DW 中 自 带 添加 注释 功能 ， 如 图 
1.21 所 示 ， 也 可 手动 添加 注释 。 


| 0 












-| 4 az) lslslw 
| | 
[| 


图 1.21 HTML 注释 


1.3.5 HTML 属性 


使 用 HTML 制作 网 页 时 ,如 果 想 让 网 页 的 内 容 更 加 丰富 ,如 设置 显示 文字 的 颜色 为 
彩色 ， 大 小 为 30。 此 时 仅仅 使 用 HTML 标签 默认 显示 样式 已 经 不 能 满足 需求 ， 这 就 需 
要 对 HTML 标签 的 属性 加 以 设置 ， 大 多 数 标签 都 有 自己 的 一 些 属性 , 属性 要 写 在 始 标签 
内 , 属性 用 于 进一步 改变 显示 的 效果 , 各 属性 之 间 无 先后 次 序 ， 可 以 省 略 而 采用 默认 值 。 
其 语法 格式 如 下 : 

< 标签 名 字 属性 1 属性 2 属性 3 … > 内 容 </ 标 签名 字 > 


在 语法 格式 中 ， 标 签 可 以 有 多 个 属性 ， 必 须 写 在 开始 标签 中 ， 位 于 标签 名 之 后 。 属 
性 与 标签 之 前 需要 一 个 空格 隔 开 ， 多 个 属性 之 间 也 要 用 空格 隔 开 。 

作为 一 般 的 原则 ， 大 多 数 属性 值 不 用 加 双 引 号 。 但 是 包括 “空格 ”““%%”“#” 等 
特殊 字符 的 属性 值 必须 加 入 双 引 号 。 为 了 养 成 良好 的 习惯 ， 提 倡 对 属性 值 全 部 加 双 引 
号 。 具 体 示例 如 下 。 


<font color="#ff00ff" face=" 宋 体 " size="30"> 字 体 设置 </font> 


如 注意 : 

一 定 不 要 在 “<” 与 标签 名 之 间 输 入 多 余 的 空格 ， 也 不 能 在 中 文 状态 下 输入 这 些 标 
签 及 属性 ， 否 则 浏览 器 不 能 正确 地 识别 括号 中 的 标志 命令 ， 从 而 无 法 正确 地 显示 信息 。 
后 面 还 会 学 习 到 更 多 其 他 的 HIML 属性 ， 这 里 读者 只 要 记 住 HTML 属性 的 基本 格式 就 好 。 


1.4 本 章 小 结 


通过 本 章 的 学 习 ， 初 步 了 解 了 Web 前 端 技术 和 相关 行业 信息 。 学 习 了 Web 前 端 开 
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发 工具 的 使 用 , 而 且 还 运行 了 第 一 个 HTML 语言 的 网 页 程序 。 本 章 中 的 学 习 重 点 是 需要 
理解 什么 是 HTML 语言 、HTML 语言 的 基本 格式 、HTML 语言 的 属性 设置 等 相关 知识 
点 。 在 下 一 章节 中 ， 将 进一步 来 学 习 HTML 这 门 语言 。 


1.5 习 题 
1. 填空 题 
(1) Web 前 端 开 发 所 包括 的 三 大 核心 技术 包含  、_  、 
JavaScript 语言 。 
(2) 超 文本 标记 语言 是 指 ” _  。 
(3) HTML 文档 包括 和 两 部 分 。 
(4) HTML 多 个 属性 之 间 分 隔 用 _ __ _ 。 


C33 用 于 向 浏览 器 说 明 当前 文档 属于 哪 种 HTML 或 XHTML 标准 规范 。 
2. 选择 题 
(1) 下 列 选 项 中 ， 不 属于 网 站 开发 四 大 职位 的 是 〈 乱 


A. Web 前 端 开发 工程 师 B. 数据 库 开发 工程 师 

C. 测试 开发 工程 师 D. Web 后 端 开发 工程 师 
(2) 下 面 不 属于 HTML 基本 结构 的 是 关 

A. <meta> B. <head> C. <body> D. <html> 
(3) 下 面 不 属于 五 大 浏览 器 的 是 (  )。 

A. Firefox 浏览 器 B. Chrome 浏览 器 

C. Safari 浏览 器 D. 360 浏览 器 
(4) 下 面 哪个 标签 限定 了 文档 的 开始 点 和 结束 点 ? (  ) 

A. <IDOCTYPE> ”B. <html> C. <head> D. <body> 
(5) 下 面 哪 个 用 来 定义 文档 标题 的 标签 ( 。 ”)。 

A. <style> B. <link> C. <scrip> D. <title> 
3， 思 考题 


(1) 请 简 述 什么 是 超 文本 标记 语言 。 
(2) 请 简 述 HTML、CSS、JavaScript 三 者 的 关系 及 职能 划分 。 





第 2 音 ehapPter I .. 
HTML 详解 


本 章 学 习 目 标 

。 了 解 HTML 语法 的 发 展 历史 ; 

。 了 解 HTML 语义 化 ; 

。 掌握 HTML 常用 标签 的 基本 使 用 。 

第 1 章 已 经 介绍 过 HTML 是 一 门 超 文本 标记 语言 ， 通 过 HTML 标记 对 网 页 中 的 文 
本 、 图 片 、 声 音 等 信息 进行 描述 。 但 是 具体 如 何 使 用 HTML 标记 对 网 页 中 的 信息 进行 控 
制 ， 没 有 介绍 ， 本 章 将 从 HTML 的 历史 、 语 义 化 、 常 用 标签 三 个 方面 详细 讲解 HTML。 


2.1 HTML 历史 


俗话 说 “了 解 历史 ， 才 能 明白 当下 ， 进 而 展望 未 来 ”， 所 以 了 解 HTML 的 历史 ， 有 
利于 更 好 的 掌握 HTML 这 门 语言 。 


2.1.1 HTML 历史 版 本 


和 大 多 数 软件 、 硬 件 一 样 ，HTML 发 展 至 今 ， 都 经 历 了 几 个 版 本 演进 ， 新 增 了 许多 
HTML 标记 , 同时 也 淘汰 了 一 些 标记 , 接 下 来 介绍 HTML 在 不 同时 期 所 对 应 的 一 些 重要 
版 本 ， 具 体 如 下 。 

。 超 文本 标记 语言 (第 一 版 ) 一 一 在 1993 年 6 月 作为 互联 网 工程 工作 小 组 (IETF) 

工作 草案 发 布 (并非 标准 )。 

。 HTML 2.0 一 一 1995 年 11 月 ，IETF 推荐 标准 。 

。 HTML 3.2 一 一 1997 年 1 月 14 日 ，W3C 推荐 标准 。 

。 HTML 4.0 一 一 1997 年 12 月 18 日 ，W3C 推荐 标准 。 

。 HTML 4.01 一 一 1999 年 12 月 24 日 ，W3C 推荐 标准 。 

。 HTML 5 一 一 2014 年 10 月 28 日 ，W3C 推荐 标准 。 

HTML 没有 1.0 版 本 , 最 早 的 HTML 官方 规范 , 是 由 IETF (Intermet Engineering Task 
Force， 因 特 网 工程 任务 组 ) 发 布 的 HIML 2.0。 之 后 W3C 成 为 HTML 语言 标准 的 制定 
者 , 发 布 了 3.2、4.0、4.01 和 5 等 多 个 后 续 重 要 版 本 。 通 常 所 说 的 HIMLS 指 的 就 是 “5” 
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这 个 最 新 的 版 本 。 
本 教材 涉及 的 所 有 规范 及 语法 ， 都 是 严格 按照 HTMLS5 标准 进行 讲解 的 ， 在 后 面 的 
章节 中 还 会 详细 地 介绍 HIML5 及 相关 内 容 。 


2.1.2 HTML 与 XHTML 关系 


在 HIML 语法 上 很 宽松 ， 如 标签 和 属性 可 以 是 大 写 、 小 写 ， 或 者 任意 大 小 写字 母 的 
组 合 ， 标 签 可 以 不 闭合 等 。 有 些 设备 很 难 兼容 这 些 松散 的 语法 ， 如 手机 、 打 印 机 等 ， 这 
并 不 符合 标准 的 发 展 趋势 ， 因 此 1999 年 12 月 W3C 推出 了 HTML4.01 版 本 后 解散 了 
HTML 工作 组 。 转 而 开发 XHTML，2000 年 1 月 26 日 发 布 XHTML1.0。 

XHTML 是 更 严谨 、 纯 净 的 HTML 版 本 ，XHTML 比 HTML 语法 更 加 规范 和 严谨 ， 
目的 是 为 了 实现 HMTL 向 XML 过 渡 ， 让 作者 按照 统一 的 风格 来 编写 标签 ， HTML 中 标 
签 和 属性 不 区 分 大 小 写 ， 而 有 效 的 XHTML 文档 则 要 求 所 有 标签 和 属性 必须 一 律 小 写 ， 
当然 还 有 一 些 其 他 的 规范 和 要 求 ,这 里 不 再 次 述 。XML 虽然 数据 转换 能 力 强 ,完全 可 以 
替代 HIML， 但 是 面 对 互 联网 上 大 量 基 于 HTML 编写 的 网 站 ， 直 接 采 用 XML 还 为 时 过 
早 ， 因 此 在 HIML4.0 的 基础 上 ， 用 XML 的 语法 规则 对 其 进行 扩展 ， 得 到 了 XHTML 。 

注 : XML 指 可 扩展 标记 语言 (EXtensible Markup Language) ， 用 来 传输 和 存储 数 
据 。XML 语言 也 可 以 作为 很 多 语言 的 基础 语言 ， 例 如 : XHTML、SVG 等 。 

HTML 的 不 同 版 本 对 <!IDOCTYPE> 写 法 也 有 不 同 ， 具 体 如 下 : 

(1) HTML4.01 中 <!IDOCTYPE> 写 法 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 


(2) XHTML1.01 中 <!IDOCTYPE> 写 法 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


(3) HTML5 中 <!IDOCTYPE> 写 法 
<!DOCTYPE HTML> 


因为 HTML 4.01 和 XHTML1.0 基于 SGML， 所 以 DOCTYPE 需要 对 DTD 进行 引 
用 。HTML 5 不 基于 SGML， 因 此 不 需要 对 DTD 进行 引用 ,因此 HTML5 的 DOCTYPE 
写法 相当 简单 。 这 里 建议 读者 都 采用 最 新 的 HTML5 版 本 <IDOCTYPE> 写 法 ， 第 1 章 已 
经 介绍 过 在 DW 工具 中 默认 设置 不 同类 型 的 文档 声明 。 


2.2 什么 是 HTML 语义 化 


HTML 语义 化 指 的 是 根据 网 页 中 内 容 的 结构 ， 选 择 适合 的 HTML 标签 进行 编写 。 


E22 HTML 详解 79 


HTML 语义 化 的 意义 主要 有 以 下 四 点 。 
。 在 没有 CSS 的 情况 下 ， 页 面 也 能 呈现 出 很 好 的 内 容 结构 、 代 码 结构 。 
。 有 利于 SEO， 让 搜索 引擎 候 虫 更 好 地 理解 网 页 ， 从 而 获取 更 多 的 有 效 信息 ， 提 
升 网 页 的 权重 。 
。 方便 其 他 设备 (如 屏幕 阅读 器 、 盲 人 阅读 器 、 移 动 设备 ) 解析 ， 以 语义 的 方式 来 
泻 染 网 页 。 
。 便于 团队 开发 和 维护 ， 语 义 化 的 HTML 可 以 让 开发 者 更 容易 理解 ， 从 而 提高 团 
队 的 效率 和 协调 能 力 。 
HTML 标签 都 具备 语义 化 , 根据 网 页 展示 的 内 容 结构 , 选择 正确 的 HIML 标签 进行 
解析 与 编码 。 
注 : SEO 是 指 在 了 解 搜索 引擎 自然 排名 机 制 的 基础 上 ， 对 网 站 进行 内 部 及 外 部 的 调 
整 优化 ， 改 进 网 站 在 搜索 引擎 中 关键 词 的 自然 排名 ， 获 得 更 多 的 展现 量 ， 吸 引 更 多 目标 
客户 单 击 访问 网 站 ， 从 而 达到 互联 网 营销 及 品牌 建设 的 目的 。 


2.3 HTML 常用 标签 


HTML 标签 非常 多 ， 有 些 由 于 历史 问题 已 经 废弃 ， 有 些 属于 HIML5 中 新 添加 的 ， 
这 部 分 HTMLS5 新 标签 会 在 HTMLS5 章节 中 给 读者 讲解 ， 本 章 主要 讲解 一 些 HTML 中 常 
用 标签 的 使 用 。 


2.3.1 标题 标签 


当 浏 览 新 闻 类 网 页 时 ， 经 常 能 看 见 文章 的 标题 ， 如 图 2.1 所 示 。 
干 笑 郑 州 《我 是 演说 家 心态 篇 》 深 幕 :| 结束 亦 


时 间 : 2017-06-19 i6:08:06” ”未 源 : 郑州 干 妈 教育 作者: Y 

子 笃 邦 州 校园 文化 活动 之 《我 是 演说 家 心志 往 ) 正式 于 幕 其 中 有 欢笑 也 有 汗 

讲 不 仅 琶 对 心态 的 痢 述 ， 更 一 自己 对 于 人 生 的 一 种 探索 ， 此 次 活动 对 钛 结束 ， 但 它 

过 这 次 活动 , 学员 们 会 对 自己 的 职业 规划 有 个 重 好 的 认识 ， 而 千 桥 也 在 向 世人 展示 
的 培养 ， 还 重视 学员 的 去 过 能力 培养 ， 培 养 的 是 全 面 发 展 的 高 诗人 才 - 


图 2.1 千 锋 教育 新 闻 标 题 


千 锋 教育 新 闻 标 题 如 图 2.1 所 示 ， 是 用 HTML 中 的 标题 标签 来 实现 的 ，HTML 中 使 
用 <hl>、<h2>、<h3>、<h4>、<h5>、<h6> 等 标签 来 定义 标题 部 分 ， 其 语法 格式 如 下 
所 示 。 


<hn 属性 =" 属 性 值 "> 标题 文本 </hn> 
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接 下 来 通过 案例 来 演示 标题 标签 ， 如 例 2-1 所 示 。 
【 例 2-1】 创建 标题 标签 的 演示 案例 。 


下 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 ”<title> 定 义 标 题 </title> 
6 </head> 

7 <body> 

8 ”<h1> 这 是 一 级 标题 </h1> 

9 ”<h2> 这 是 二 级 标题 </h2> 


10 ”<h3> 这 是 三 级 标题 </h3> 
11 <h4> 这 是 四 级 标题 </h4> 
12 ”<h5> 这 是 五 级 标题 </h5> 
13 ”<h6> 这 是 六 级 标题 </h6> 
14 </body> 

15 </html> 

运行 结果 如 图 2.2 所 示 。 


Es Ee el eal 
村 上 总 4 x 和 | 


所 已 1@ File; DD: /HLerasple/chapter02/2-1 html 个 


这 是 一 级 标题 | 
这 是 二 级 标题 
这 是 三 级 标 是 

这 是 四 级 标题 


这 是 五 级 标题 











A 
2.2 ”标题 标签 显示 效果 


从 上 例 运行 结果 可 以 看 出 ， 默 认 情况 下 标题 文字 的 显示 方式 是 加 粗 左 对 齐 ， 并 且 从 
<hl> 到 <h6> 字 号 递减 。 如 果 想 改变 标题 的 对 齐 方式 ， 需 要 用 到 align 属性 ， 其 取 值 如 表 
2.1 所 示 。 











表 2.1 align 取 值 表 
属 性 值 对 齐 方 式 
left 左 对 齐 
center 居中 对 齐 
right 右 对 齐 
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接 下 来 通过 案例 来 演示 标题 标签 对 齐 方式 的 设置 及 效果 ， 如 例 2-2 所 示 。 
【 例 2-2】 标题 标签 对 齐 方式 的 设置 及 效果 的 演示 案例 。 


¥ <!doctype html> 

他 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 定 义 标题 对 齐 方式 </title> 

6 </head> 

| <body> 

8 ”<h1> 这 是 一 级 标题 </h1> 

9 ”<h2 align="left"> 这 是 二 级 标题 </h2> 


10 <h3 align="center"> 这 是 三 级 标题 </h3> 
11 <h4 align="right"> 这 是 四 级 标题 </h4> 
12 </body> 

13 </html> 


运行 结果 如 图 2.3 所 示 。 





已 1O tile WD: /HLerample/chipter02/2-2,btnl 全 | 上 


这 是 一 级 标题 


这 是 二 级 标题 





图 2.3 ”标题 对 齐 方式 显示 效果 


标题 有 利于 网 页 搜索 引擎 的 优化 ,其 中 <h1> 标 题 的 重要 性 最 高 ，<h6> 标 题 的 重要 性 
最 低 ， 一 般 一 个 页 面 只 能 有 一 个 <hl>， 而 <h2>~<h6> 可 以 有 多 个 。 


2.3.2 段落 标签 


浏览 新 闻 类 网 页 时 ， 经 常 能 看 见 文章 的 段落 ， 千 锋 教育 新 闻 段 落 如 图 2.4 所 示 。 
干 锋 郑 州 《我 是 演说 家 心态 篇 》 落 幕 : 结束 亦 


时 间 ; 2017-06-19 1608:06 ”未 源 ; 郑州 千 恬 教育 作者 ! Y 


wr 
讲 不 仅 本 对 心态 的 曾 还 ， 更 量 自 己 对 于 人 生 的 一 种 探索 。 此 次 活动 至 然 结 束 ， 但 它 E 
过 这 次 活动 ,学 员 们 会 对 自己 的 职业 规划 有 个 更 好 的 认识 ， 而 千 轿 也 在 向 世人 展示 
的 培养 ， 还 重视 学 员 的 表达 训 力 培养 ， 培 养 的 星 全 面 发 展 的 高 匡 人 才 。 


2.4 千 锋 教育 新 闻 段 落 
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图 2.4 中 的 段落 在 HTML 中 是 通过 使 用 <p> 标 签 实现 ， 用 于 在 网 页 中 把 文字 有 条 理 
地 显示 出 来 ， 其 语法 格式 如 下 : 





<p 属性 =" 属 性 值 "> 段落 文本 </p> 

接 下 来 通过 案例 来 演示 段落 标签 ， 如 例 2-3 所 示 。 

【 例 2-3】 创建 段落 标签 的 演示 案例 。 

bi <!doctype html> 

权 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 段 落 标 签 </title> 

6 </head> 

学 <body> 

8 <hl align="center" > 扣 丁 学 堂 </h1></hl1> 

9 <p align="left"> 扣 丁 学 堂 是 中 国 IT 培训 教育 品牌 领导 者 ,拥有 最 新 最 全 的 IT 培训 视 
10 ” 频 课 程 , 专注 于 发 布 和 更 新 i0S 培训 、Android 培训 、HTML5 培训 、UI 培训 、PHP 培训 视 
11 ” 频 教程 ,着力 于 培养 移动 互联 网 人 才 。</p> 

12 <p align="ri"> 遇 到 IT 技术 难题 ,就 上 扣 丁 学 堂 学 堂 。</p> 

13 </body> 


14 </html> 


运行 结果 如 图 2.5 所 示 。 


F 


多 DD 和 ; - 
| 所 Cc © ile///D/HTMLexampie/chapter02/2-3.html 

















扣 丁 学 堂 


| 扣 本 学堂 是 再 国 I 培训 数 育 品牌 久 导 者 ,拥有 最 新 最 全 的 IT 培训 视频 说 
程 ,专注 于 发 布 和 更 新 iDOS 培 训 ，Android 培 训 ，HTML5 培 训 、U 莘 
训 ，PHP 培 训 坑 频 教 程 , 看 力 于 培养 移动 互联 网 人 才 。 


歇 到 TT 技 术 难 题 , 就 上 扣 丁 字 党 。 





图 2.5 段落 标签 显示 效果 


2.3.3 ”文本 格式 化 标签 


文本 格式 化 标签 就 是 针对 文本 进行 各 种 格式 化 的 标签 ， 例 如 : 加 粗 、 斜 体 、 上 标 、 
下 标 等 。 文 本 格式 化 标签 如 表 2.2 所 示 。 
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表 2.2 文本 格式 化 标签 











标 签 文字 显示 效果 
<strong> 强调 加 粗 
<em> 强调 斜体 
<sub> 下 标 文本 
<sup> 上 标 文本 
<del> 加 删除 线 方式 
<ins> 加 下 画 线 方式 





表 2.2 中 列 出 了 对 文本 格式 化 的 四 种 标签 ， 下 面 将 详细 介绍 这 四 种 标签 的 使 用 和 效果 。 


1，<strong> 标 签 


<strong> 标 签 将 文本 定义 为 语气 更 强 的 强调 内 容 ， 展 示 效 果 为 加 粗 。 接 下 来 通过 案 
例 演示 <strong> 标 签 ， 如 例 2-4 所 示 。 
【 例 2-4】 <strong> 标 签 运行 的 演示 案例 。 























下 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title> 文 本 格式 化 </title> 
6 </head> 
2 <body> 
8 ”<strong> 用 良心 做 教育 ! </strong> 
9 </body> 
10 </html> 
运行 结果 如 图 2.6 所 示 。 
ED 
口 文本 格式 化 x WY 
一 GCG |© file:///D:/HTMLexample/chapter02/2-4.html ”六 
用 良心 做 教育 ! 
图 2.6 strong 标签 显示 效果 
是 注意 : 


<b> 标 签 的 展示 效果 与 <strong> 完 全 相同 ， 但 是 <b> 标 签 不 具备 语义 化 强调 的 作用 ， 
只 是 显示 加 粗 效果 。 


2，<em> 标 签 


<em> 标 签 也 是 将 文本 定义 为 强调 的 内 容 ， 只 不 过 比 <strong> 标 签 强调 的 稍 弱 些 ， 展 
示 效 果 为 斜体 ， 接 下 来 通过 案例 来 演示 <em> 标 签 ， 如 例 2-5 所 示 。 


24 


TML5 从 入 门 到 精通 


【 例 2-5】 <em> 标 签 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 本 格式 化 </title> 
</head> 

<body> 

<em> 用 良心 做 教育 ! </em> 
</body> 

</html> 


运行 结果 如 图 2.7 所 示 。 


ownaoum 必 wm 


So 


中 文本 格式 化 x 





所 © IO file:///D:/HIMLexample/chapter02/2-5. html 女 | : 





羽 户 心 例 吉 序 ! 





图 2.7 <em> 标 签 显示 效果 


瑰 注意 : 
<i> 标 签 的 展示 效果 跟 <em> 完 全 相同 ， 但 是 <i> 标 签 不 具备 语义 化 强调 的 作用 ， 只 是 
显示 斜体 效果 。 


3。.<sup> 和 <sub> 标 签 


<sup> 标 签 用 于 将 文本 定义 为 上 标 文本 ，<sub> 标 签 用 于 将 文本 定义 为 下 标 文本 ， 接 
下 来 通过 案例 来 演示 <sup> 和 <sub> 标 签 ， 如 例 2-6 所 示 。 
【 例 2-6】 <sup> 和 <sub> 标 签 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 本 格式 化 </title> 
</head> 

<body> 
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p> 
<p>H<sub>2</sub>0</p> 
10 </body> 

11 </html> 


运行 结果 如 图 2.8 所 示 。 


[> 
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32162=02 


H2O 





图 2.8 ”<sup> 和 <sub> 标 签 显示 效果 


4，<del> 和 <ins> 标 签 


<del> 标 签 可 用 于 定义 已 被 删除 的 文本 ，<ins> 标 签 可 用 于 定义 已 经 被 插入 的 文本 ， 
<del> 标 签 与 <ins> 标 签 配合 使 用 来 描述 文档 中 的 更 新 和 修正 。 接 下 来 通过 案例 来 演示 
<del> 标 签 和 <ins> 标 签 ， 如 例 2-7 所 示 。 

【 例 2-7】 <del> 和 <ins> 标 签 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 本 格式 化 </title> 

</head> 

<body> 
<p><de1> 删 除 文 本 加 删除 线 </del></p> 
<p><ins> 插 入 文本 加 下 夯 线 </ins></p> 
</body> 

</html> 


运行 结果 如 图 2.9 所 示 。 


or pr 


上 
-oo 





&JLETGT 3 





:///D:/HIMLexanple/chapter02/2-7. html 女 | ; 








图 2.9 <del> 标 签 和 <ins> 标 签 显示 效果 


文本 格式 化 标签 ， 一 定 要 根据 它们 的 语义 来 记忆 ， 至 于 它们 的 默认 样式 ， 后 续 可 以 
通过 CSS 方式 进行 修改 。 


2.3.4 引用 标签 


引用 标签 就 是 针对 文本 进行 各 种 引用 的 标签 ， 例 如 : 缩 略 词 、 短 语 解释 、 著 作 、 地 
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址 等 。 主 要 划分 成 五 大 类 ， 引 用 标签 分 类 如 表 2.3 所 示 。 
表 2.3 引用 标签 分 类 











标 签 作 用 
<blockquote> 引用 大 段 的 段落 解释 
<q> 引用 小 段 的 短语 解释 
<abbr> 缩写 或 首 字母 缩 略 词 
<address> 引用 文档 地 址 信息 
<cite> 引用 著作 的 标题 








表 2.3 中 列 出 了 引用 标签 的 五 种 分 类 ， 下 面 进行 详细 介绍 。 

1，<blockquote> 和 <q> 标 签 

<blockquote> 和 <q> 标 签 都 是 对 文本 的 解释 引用 ，<blockquote> 标 签 引用 是 用 大 段 的 
段落 进行 解释 ， 而 <q> 标 签 引 用 是 小 段 的 短语 进行 解释 ， 接 下 来 通过 案例 来 演示 
<blockquote> 和 <q> 标 签 ， 如 例 2-8 所 示 。 

【 例 2-8】 <blockquote> 和 <q> 标 签 的 演示 案例 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 文 本 格式 化 </title> 

6 </head> 

7 <body> 

8 ”<p>" 死 而 后 已 "一 语 出 自 诸葛 亮 《 出 师表 》: <blockquote>“ 凡 事 如 是 ， 难 可 道 见 ， 
a 臣 鞠 躬 尽 阅 , 死 而 后 已 , 至 于 成 败 利 钝 , 非 臣 之 明 所 能 逆 睹 也 。"</blockquote></p> 
10 ”<p>WWEF 的 目标 是 : <q> 构 建 人 与 自然 和 谐 共存 的 世界 。</q></P> 

11 </body> 

12 </html> 


运行 结果 如 图 2.10 所 示 。 





口 文本 格式 化 x 人 


万 CC |© file:///D:/HTMLexanple/chapter02/2-8. html 





“ 死 而 后 已 "一 语 出 自 诸葛亮 《出 师表 》 : 


“凡事 如 是 ， 难 可 逆 见 ， 丐 鞠躬 尽 凌 ， 死 而 后 已 ， 至 于 
成 败 利 钝 ， 非 臣 之 明 所 能 逆 暑 也 。” 


WWF 的 目标 是 : "构建 人 与 自然 和 谐 共存 的 世界 。” 





图 2.10 ”<blockquote> 标 签 和 <q> 标 签 显示 效果 


由 例 2-8 中 可 以 看 出 ，<blockquote> 标 签 左 右 会 空 出 一 些 距离 ，<q> 标 签 会 自动 地 加 


E22 HTML 详解 pp 


上 引号 。 
2. <abbr> 标 签 
<abbr> 标 签 用 来 引用 缩写 或 首 字 母 缩 略语 ， 接 下 来 通过 案例 来 演示 <abbr> 标 签 ， 如 


例 2-9 所 示 。 
【 例 2-9】 <abb 上 > 标签 的 演示 案例 。 


1 <!doctype html> 

芝 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 ”<title> 引 用 标签 </title> 
6 </head> 

7 <body> 

8 <p><abbr title="World Health Organization">WHO</abbr> 
9 成 立 于 1948 年 。</p> 
10 </body> 

11 </html> 


运行 结果 如 图 2.11 所 示 。 


中 引用 标签 x 


€ © | © sile:///D:/HTMLexanple/chapter02/2-9. html 





| WHQ 成 立 于 1948 年 。 





2.11 ”<abbr> 标 签 显示 效果 


例 2-9 中 可 以 看 到 一 个 title 属性 ， 当 鼠标 移入 到 设置 title 的 区 域 时 ， 就 会 显示 提示 
言 息 。 


3，<address> 和 <cite> 标 签 


<address> 标 签 用 来 引用 地 址 信息 ，<cite> 标 签 用 来 引用 著作 的 标题 ， 展 示 效 果 为 斜 
体 ， 接 下 来 通过 一 个 案例 来 演示 <address> 标 签 和 <cite> 标 签 ， 如 例 2-10 所 示 。 
【 例 2-10】 <address> 标 签 和 <cite> 标 签 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 引 用 标签 </title> 
</head> 

<body> 


OproDp 
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8 <address> 

9 ”<p> 网 易 北 京 公司 </p> 

10 ”<p> 地 址 :北京 市 海淀 区 西北 旺 东 路 10 号 院 </p> 

11 ” <p> 邮编:100084</p> 

12 </address> 

13 ”<p><cite> 资 治 通 鉴 </cite> 由 北宋 司马 光 主编 的 一 部 多 卷 本 编 年 体 史书 </p> 
14 </body> 

15 </html> 


运行 结果 如 图 2.12 所 示 。 


x WE 








€ GC |© file:///D:/HTMLexample/chapter02/2-10.html 售 


克 易 1 这 公司 

衣 相 :北京 志 海 渤 区 本 1b 汪 东 句 10 号 院 

万 绽 100084 

资 汉沽 涯 由 北宋 司马 光 主 编 的 一 部 多 卷 本 编 年 体 史书 





图 2.12 <address> 标 签 和 <cite> 标 签 显示 效果 


2.3.5 水平线 标签 


有 时 为 了 使 文档 结构 清晰 、 层 次 分 明 ， 常 常 需要 在 网 页 中 添加 一 些 水 平 线 将 段落 与 
段落 之 间 分 隔 开 ，HIML 使 用 <hr> 标 签 来 创建 横 跨 网 页 的 水 平 线 。 另 外 <hr> 属 于 单 标签 ， 
在 网 页 中 输入 一 个 <hr> 标 签 ， 就 添加 了 一 条 默认 样式 的 水 平 线 ，<hr> 标 签 的 常用 属性 如 
表 2.4 所 示 。 


表 2.4 ”水平 线 标签 属性 

















设置 水 平 线 对 齐 方式 | 可 选择 lefi、right、center 三 个 值 ， 默 认为 center， 居 中 对 齐 
设置 水 平 线 粗细 以 像素 为 单位 ， 黑 认为 2 像素 
width ”| 设置 水 平 线 宽度 确定 的 像素 什 或 浏览 器 窗口 的 百分比 《默认 为 1005%6) 









设置 水 平 线 颜 色 可 用 颜色 名 称 、 十 六 进 制 术 GB、rgb (rgb) 设置 颜色 值 


color 








接 下 来 通过 案例 来 演示 水 平 线 标签 ， 如 例 2-11 所 示 。 
【 例 2-11】 水 平 线 标签 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf 8"> 


ODP 
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5 ”<title> 水 平 线 标签 </title> 

6 </head> 

7 <body> 

8 <p align="center"> 扣 丁 学 堂 </p> 

9 <hr color="#003399" width="100" size="5"> 
10 <p align="left"> 遇 到 IT 难题 ,就 上 扣 丁 学 堂 。</p> 
“<hr> 

12 ”<p> 遇 到 问题 ， 在 线 解答 。</p> 

13 </body> 

14 </html> 


运行 结果 如 图 2.13 所 示 。 


上 水 手续 标 等 x 拓 二 
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扣 丁 学 党 


| 逻 到 IT 难题 ， 就 上 扣 丁 学 堂 。 





遇 到 问题 ， 在 线 解 答 。 





2.13 ”<hr> 标 签 显示 效果 


例 2-11 中 ， 第 9 行 定义 水 平 线 标签 ， 同 时 还 设置 了 color、width、size 属性 ， 而 并 
没有 设置 align 属性 ,可 以 发 现 align 属性 默认 居中 对 齐 , 第 11 行 定义 水 平 线 标签 ， 其 属 
性 都 是 默认 值 ， 可 发 现 width 属性 默认 的 是 浏览 器 窗口 的 100%。 


2.3.6 ”特殊 符号 


在 编写 一 些 文本 时 ,经 常会 遇 到 输入 法 无 法 输入 的 字符 ， 如 ®@ 注 册 商 标 )、© (版 
权 符 ) 等 ， 还 有 往 一 段 文字 中 加 入 多 个 空格 时 ， 页 面 并 不 会 解析 出 多 个 空格 。 这 些 无 法 
输入 的 字符 和 空格 的 字符 都 是 特殊 字符 , 在 HIML 中 , 为 这 些 特殊 字符 准备 了 专门 的 代 
码 ， 特 殊 字符 代码 如 表 2.5 所 示 。 


表 2.5 特殊 字符 代码 


特殊 字符 代码 
&nbsp; 
Rcopy; 






















&reg; 
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续 表 
特殊 字符 含义 特殊 字符 代码 
对 人 民 币 &yen; 
摄氏 度 &deg; 
土 正 负 号 &plusmn; 
x 乘 号 &times; 
除 号 &divide; 
1 上 标 1 &supl; 
2 上 标 2 &sup2; 
EE 上 标 3 &sup3; 
接 下 来 通过 案例 来 演示 这 些 特殊 字符 表示 代码 ， 如 例 2-12 所 示 。 
【 例 2-12】 特殊 字符 表示 的 演示 案例 。 
1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title> 特 殊 符号 </title> 
6 </head> 
二 <body> 
8 ”<p>&reg; 注 册 商 标 snbsp; gcopy; 版 权 inbsp; 空格 gnbsp; &lt; gnbsp; 小 于 号 
&nbsp; &gt; 大 于 号 </p> 
9 ”<p>&amp; 和 号 enbsp; &yen; 人 民 币 anbsp; &deg; 摄 氏 度 gnbsp; gplusmn; 正 负 号 
&nbsp; &times; 乘 号 </p> 
10 ”<p>gnbsp; &divide; 除 号 enbsp; &sup1; 上 标 1g&nbsp; &sup2; 上 标 2&nbsp; &sup3; 
上 标 3</p> 
11 </body> 
12 </html> 


运行 结果 如 图 2.14 所 示 。 





口 特殊 符号 
€ C |Q file: 





四 注册 商标 版 权 空格 < 小 于 号 > 大 于 号 
&& 和 号 半 人 人民币“ 摄氏度 + 正 负 号 x 乘 号 
= 除 号 1 上 标 1 ?上 标 2 3 上 标 3 








2.14” 难 输入 符号 显示 效果 


在 DW 中 ， 只 要 输入 一 个 & 符 号 ， 就 可 以 看 到 相关 特殊 符号 的 提示 信息 。DW 中 特 
殊 符 号 提示 功能 如 图 2.15 所 示 。 
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<!doctype html> 因 
<hrml> 
<head> 


<mera charset="utf-8"> 
<cicle> 特 殊 符号 </cicle> 
</head> 





2.15 DW 中 特殊 符号 提示 功能 


2.3.7 图像 标签 


每 一 张 网 页 都 离 不 开 图 片 元 素 ， 在 网 页 中 添加 图 片 是 非常 重要 的 操作 ， 图 片 效果 展 
示 如 图 2.16 所 示 。 


oN tA 内 
一 2047 于 -和 镭 教 育 某 吕 
ER 





"上 海 千 锋 户外 拓展 ; 高 温 何 所 蛋 团结 协作 战 力 足 
* 干 锋 学 员 高 薪 就 业 的 秘密 首 次 公开 

“ 千 锋 区 光 夜 跑 员工 文化 活动 “最 美 狠 彩 逐 梦 而 行 ” 
“2017 干 锋 举 办 号 期 师资 培训 活动 圆 汽 结 囊 


2.16 图片 效果 展示 


1. src 属性 
HTML 中 使 用 <img> 标 签 来 添加 图 片 ，<img> 属 于 单 标签 ， 其 语法 格式 如 下 : 


<img src=" 图 像 URL"/> 
其 中 src 是 用 于 指定 图 像 文 件 的 路 径 和 文件 名 的 属性 ,是 <img> 标 签 的 必需 属性 。 接 


下 来 用 案例 来 简单 演示 <img> 标 签 的 使 用 。 如 例 2-13 所 示 。 
【 例 2-13】 创建 <img> 标 签 的 演示 案例 。 


I <!doctype html> 
2 <html> 
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<head> 
<meta charset="utf-8"> 
<title> 图 像 标签 </title> 
</head> 
<body> 
<img src="qianfeng.jpg"/> 
</body> 

0 </html 


运行 结果 如 图 2.17 所 示 。 


ee 到 


一 次 也 只 能 脚 路 实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 


BB oO J 























图 2.17 图 像 标 签 显 示 效果 


src 属性 引用 的 是 当前 图 片 的 地 址 ， 图 片 的 名 为 qianfeng， 图 片 的 格式 为 .png， 接 下 
来 针对 图 片 的 地 址 和 图 片 的 格式 进行 详细 讲解 。 

(1) 图 片 的 地 址 

src 属性 引用 的 是 当前 图 片 的 地 址 , 所 谓 地 址 就 是 一 个 文件 的 路 径 。 读者 在 网 页 中 可 
以 通过 地 址 来 找到 相应 位 置 的 元 素 。 地 址 分 为 相对 地 址 与 绝对 地 址 ， 相 对 地 址 即 被 引入 
的 文件 相对 于 当前 页 面 的 地 址 ; 绝对 地 址 即 文件 在 网 络 或 本 地 的 绝对 位 置 。 

@ 相对 地 址 有 以 下 三 种 写法 ， 具 体 如 下 所 示 : 

<img src="qianfeng.jpg"/> 

<img src="img/qianfeng.jpg"/> 

<img src="../img/qianfeng.jpg"/> 

第 一 个 相对 地 址 说 明 当 前 页 面 和 图 片 在 同一 个 目录 下 。 第 二 个 相对 地 址 说 明 图 片 在 
页 面 同 级 的 img 文件 夹 中 。 第 三 个 相对 地 址 说 明 图 片 在 页 面 上 一 级 的 img 文件 夹 中 。 

@ 绝对 地 址 有 以 下 两 种 写法 ， 具 体 如 下 所 示 : 


<img src="file:///DI/gqf/2017/book/2/qianfeng.jpg"/> 

<img src="http://www.mobiletrain.org//images/index/qianfeng.jpg"/> 

第 一 个 绝对 地 址 在 本 地 D 盘 的 相应 文件 夹 下 , 第 二 个 绝对 地 址 在 网 络 中 的 相应 文件 
夹 下 。 
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当前 网 页 和 图 片 文件 同时 移动 到 其 他 位 置 时 ， 相 对 地 址 是 不 会 出 问题 的 ， 因 为 两 个 
文件 的 相对 位 置 并 没有 发 生变 化 ; 而 绝对 地 址 则 会 有 问题 ， 因 为 地 址 是 唯一 的 路 径 ， 所 
以 在 开发 网 页 时 ， 建 议 读者 尽量 采用 相对 地 址 。 

(2) 图 片 格 式 

网 页 中 加 载 图 像 如 果 太 大 , 则 会 造成 网 页 加 载 速度 变 慢 、 太 小 的 图 片 会 显示 不 清晰 ， 
在 网 页 中 选择 合适 的 图 片 格式 加 载 就 显得 尤为 重要 。 常 用 的 图 片 格式 主要 有 jpg、png 和 
gif 三 种 格式 ， 接 下 来 将 对 其 分 别 进行 详细 讲解 。 

Q@ jpg 格式 

jpg 格式 的 图 片 是 一 种 有 损 压缩 的 图 像 格 式 ， 即 每 次 修改 图 片 都 会 造成 一 些 图 像 数 
据 的 丢失 。jpg 是 特别 为 照片 图 像 设 计 的 文件 格式 ， 可 以 很 好 地 处 理 大 面积 色调 的 图 像 ， 
一 般 在 网 页 中 用 来 展示 色彩 丰富 的 图 像 。jpg 格式 图 片 显 示 效 果 如 图 2.18 所 示 。 

学 员 作 品 


STUDENT WORKS 








UI- 拟 物化 图 标 UI - 泡 泡 音 乐 UI - 写实 主题 


图 2.18 jpg 格式 图 片 显示 效果 


@ png 格式 

png 格式 的 图 片 相对 于 jpg、gif 格式 最 大 的 优点 是 体积 小 , 支持 alpha 透明 (全 透明 、 
半 透 明 、 全 不 透明 ) ， 可 以 很 好 地 处 理 透明 方式 的 图 片 ， 比 如 : 网 页 中 的 logo 图 片 可 以 
在 不 同 的 背景 底 色 下 完美 展现 。png 格式 图 片 显示 效果 如 图 2.19 所 示 ， 但 png 格式 的 图 
片 不 支持 动画 。 另 外 需要 注意 的 是 IE6 浏览 器 可 以 支持 png-8， 但 是 在 处 理 png-24 的 透 
明 时 会 显示 为 灰色 。 通常， 图 片 保存 为 png-8 会 在 同等 质量 下 获得 比 gif 更 小 的 体积 ,而 
半 透 明 的 图 片 只 能 使 用 png-24。 


(SN 于 锋 教 育 北京 (总 部 ) 


www.mobiletrain.org 校区 切 揪 ~ 


(RQ 干 锋 教 育 北京 (总 部) 


Wwww,mobiletrain.org 校医 切 隶 = 


2.19 png 格式 图 片 显示 效果 
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@ gf 格式 

gif 格式 图 片 最 重要 的 特点 是 支持 动画 , 可 以 很 好 地 处 理 动画 效果 的 图 片 ， 如 网 页 中 
的 广告 图 片 。gif 格 式 图 片 显示 效果 如 图 2.20 所 示 。 同 时 gif 是 一 种 无 损 的 图 像 格式 ， 修 
改 图 片 几乎 不 会 造成 图 像 数据 的 丢失 。 而 且 gif 也 支持 透明 (全 透明 和 全 不 透明 ) ， 因 
此 很 适合 在 网 页 中 使 用 。 但 gif 只 能 处 理 256 种 颜色 ， 在 网 页 制作 中 ， 常 用 于 logo、 小 
图 标 及 其 他 色彩 相对 单一 的 图 像 。 





图 2.20 gif 格式 图 片 显示 效果 


2， 其 他 属性 
<img> 标 签 除了 src 属性 外 , 还 包括 一 些 其 他 属性 , <img> 标 签 的 其 他 属性 如 表 2.6 所 示 。 
表 2.6 <img> 标 签 的 其 他 属性 


属性 描述 
alt 图 片 显示 不 出 来 时 的 提示 文字 


ite ”|[ 文 和 | RE 动 到 图 片 [ 的 提示 文字 
width 像素 (XHTML 不 支持 页 面 百 分 比 ) | 设置 图 片 的 宽度 
height 像素 (XHTML 不 支持 页 面 百 分 比 ) | 设置 图 片 的 高 度 


border 设置 图 片 边框 的 宽度 
Vspace 设置 图 片 顶部 和 底部 的 空白 (垂直 边 距 ) 
hspace EE (水 平 边 距 ) 


二 将 图 片 的 顶端 和 文本 的 第 一 行文 字 对 齐 , 其 他 文 
字 位 于 图 片 下 方 

将 图 片 的 水 平 中 线 和 文本 的 第 一 行文 字 对 齐 , 其 

他 文字 位 于 图 片 下 方 


Be 将 图 片 的 底部 和 文本 的 第 一 行文 字 对 齐 , 其 他 文 
字 位 于 图 片 的 下 方 


表 2.6 中 简单 描述 了 <img> 标 签 中 常用 的 属性 ,为 了 使 初学 者 更 好 地 理解 和 应 用 这 些 
属性 ， 下 面 将 对 其 进行 详细 讲解 。 

(1) alt 属 性 

alt 属性 是 图 片 显示 不 出 来 时 的 提示 文字 。 当 设置 了 alt 属性 后 ,如果 图 片 正常 显示 ， 
是 看 不 到 任何 效果 的 , 只 有 当 图 片 地址 出 问题 导致 图 片 不 显示 时 , 才 可 以 看 到 alt 的 提示 
信息 。 接 下 来 通过 案例 来 演示 alt 属性 ， 如 例 2-14 所 示 。 





align 


【 例 2-14】 alt 属性 的 演示 案例 。 


DI WN 


运 和 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 图 像 标签 </title> 
</head> 

<body> 

<img src="qianfeng.jpg"> 
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<img src="qianfengError.jpg”alt=" 千 锋 教 育 "> 


</body> 
</html> 


结果 如 图 2.21 所 示 。 











机 罗 册 上 ， 
一 次 也 只 能 脚 路 实地 地 迈 一 步 。 


一 一 干 锋 成 功 心 语 


图 2.21 alt 属 性 显示 效果 


(2) title 属性 
title 属性 是 鼠标 移 到 图 片上 的 提示 文字 。 当 设置 了 title 属性 后 ， 如 果 和 鼠标 移入 到 图 
片上 时 ， 就 会 显示 title 的 提示 信息 。 接 下 来 通过 案例 来 演示 title 属性 ， 如 例 2-15 所 示 。 
【 例 2-1S】 title 属性 的 演示 案例 。 


BD HO AI ns WV 


卢 
b= 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 图 像 标签 </title> 
</head> 

<body> 


<img src="qianfeng.jpg"” title=" 千 锋 教育 "> 


</body> 
</html> 





36 TML5 从 入 门 到 精通 














运行 结果 如 图 2.22 所 示 。 
f [sa|[s1el| ¥ 
/上 图 像 标签 x “ES 
< 已 © File:///D:/H Meranple/chapter02/2-15, html 去 | 























图 2.22 title 属性 显示 效果 


alt 属性 和 title 属性 都 是 有 利于 SEO 搜索 引擎 的 优化 和 用 户 体验 的 提升 ， 只 是 它们 
展示 的 方式 不 一 样 。 


2.3.8 ”链接 标签 


单个 网 页 不 能 容纳 网 站 需要 的 所 有 信息 ， 需 要 多 个 网 页 构成 ， 这 时 单 击 链接 就 可 以 
从 一 张 网 页 跳 转 到 另 一 张 网 页 ， 链 接 效 果 展 示 如 图 2.23 所 示 。 


媒体 报道 
千 锋 故事 MORES> 
大 学 生 奋 斗 拼 捕 的 岁月 干 锋 安 卓 培 迎 明 答 ， 想 今天 要 学 什么 ， 送 余 坦 ， 思 今天 学 会 什么 。 
Ti! 一 二 儿 成 功 Q 语 


- 找 工 作 脖 到 问题 怎么 办 ? 千 锋 HTML5 培 
.PHP 培训 后 薪资 是 穴 少 ? 干 锋 学 员 月 薪 
:大学生 的 亲身 体会 感谢 干 锋 PHP 培 训 
-敢于 突破 向 前 干 活 HTML5 学 员 14K 高 





“CSDN] 干 锋 大 数据 开发 培训 让 学 员 就 业 通 行 无 障碍 
“ [ 凤 驾 网] 四川 计算 机 学 全 与 千 锋 亲 千 2017 暑 期 师 资 类 训 | 


图 2.23 ”链接 效果 展示 
HTML 中 使 用 <a></a> 标 签 来 定义 链接 部 分 实现 网 页 的 跳 转 ， 其 语法 格式 如 下 : 
<a href=" 链 接 页 面 地 址 ”target=" 链 接 打开 的 方式 "> 链接 对 象 </a> 


接 下 来 通过 案例 来 演示 链接 标签 ， 如 例 2-16 所 示 。 
【 例 2-16】 链接 标签 的 演示 案例 。 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 链 接 标 签 </title> 

</head> 

<body> 

<a href="2-15.html"> 打 开 一 个 新 的 网 页 </a> 
<a href="http://www.mobiletrain.org"> 干 锋 官网 </a> 
<a href="../ 照 片 .rar"> 下 载 压缩 包 文件 </a> 
</body> 

</html> 


了 结果 如 图 2.24 所 示 。 


ownaumn 必 wm 


FF 
N 口 


~ 


(a 





0 
I 鲍 接 标 答 x 全 汪 


| 所 © | © file: 4D:/HTIMLexample/chapter0212-16.btm 全 | 上 








图 2.24 ”链接 标签 显示 效果 


链接 和 图 像 一 样 ， 地 址 可 以 是 相对 地 址 ， 也 可 以 是 绝对 地 址 。 链 接 除了 可 以 链接 地 
址 外 ， 还 可 以 链接 其 他 的 元 素 ( 如 压缩 包 、Word 文档 、PPT 文档 等 ) 。 例 2-16 中 第 一 
个 链接 打开 的 是 一 个 本 地 中 的 相对 地 址 ， 第 二 个 链接 打开 的 是 一 个 网 络 上 的 绝对 地 址 ， 
第 三 个 链接 单 击 后 会 下 载 一 个 压缩 包 文件 。 

链接 可 以 针对 文字 ， 也 可 以 针对 图 片 ， 当 单 击 图 片 时 会 打开 一 个 新 的 网 页 ， 接 下 来 
通过 案例 来 演示 ， 如 例 2-17 所 示 。 

【 例 2-17】 链接 的 演示 案例 。 


I <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 链 接 标 签 </title> 

6 </head> 

<body> 

8 <a href="2-15.html"> 

9 <img src="qianfeng.jpg"> 


10 </a> 
11 </body> 
12 </html> 


运行 结果 如 图 2.25 所 示 。 
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CG | © 二 le:///D:/HTMLexample/chapter02/2-17. htaml 去 | 





RE 必 到 最 高 的 山上 ， 本 


一 次 也 只 能 脚 路 实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 


Eile:///D-/HIMLezasple/chapter02/2-15. hta=l 





图 2.25 链接 图 片 的 显示 效果 


例 2-16 和 例 2-17 中 <a> 标 签 只 定义 了 href 属 性 ,<a> 标 签 除了 href 属 性 外 还 包含 target 
和 name 两 个 重要 属性 ， 下 面 就 来 分 别 介 绍 <a> 标 签 的 这 三 个 属性 。 

(1) href 属性 

href 属性 就 是 来 指定 链接 目标 的 url 地 址 ， 为 <a> 标 签 定义 href 属性 后 ， 它 就 有 了 链 
接 的 功能 。 

(2) name 属性 

有 些 网 页 的 内 容 较 多 、 页 面 过 长 ， 如 百度 百科 千 锋 教 育 ， 只 能 不 断 地 拖 动 滚动 条 来 
浏览 网 页 ， 查看 所 需要 的 内 容 ， 这 样 操作 的 效率 较 低 , 而且 很 不 方便 , 这 时 可 以 通过 <a> 
标签 的 name 属性 实现 站 内 跳 转 ， 这 种 站 内 的 跳 转 的 方式 也 称 为 锚 点 操作 ， 接 下 来 通过 
案例 来 演示 name 属性 的 作用 ， 如 例 2-18 所 示 。 

【 例 2-18】 name 属性 的 作用 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 链 接 标签 </title> 

</head> 

<body> 

<a href="#h5Pos">HTML5</a> 

<a href="#phpPos">PHP</a> 

<p> 单 击 上 面 的 链接 可 跳 转 到 指定 的 位 置 </p> 
<a name="h5Pos">HTML5 的 内 容 </a> 
<p>HTML5</p> 

<p>HTML5</p> 

<p>HTML5</p> 

<p>HTML5</p> 

<p>HTML5</p> 

<a name="phpPos">PHP 的 内 容 </a> 
<p>PHP</p> 


PppPpPPP 人 Oop 
OWODNDPO 


Pp 
ma 
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19 <p>PHP</p> 

20 <p>PHP</p> 

21 <p>PHP</p> 

22 <p>PHP</p> 

23 </body> 

24 </html> 

运行 结果 如 图 2.26 所 示 。 
[Ele SIE 
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€ © | sile: 
HTML5 的 内 容 
HTML5 











HIMLS PHP 
点 击 上 面 的 链接 可 跳 转 到 指定 的 位 置 
HTML5 的 内 容 
HTML5 
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2.26 name 属性 的 显示 效果 


(3) target 属性 
target 属性 用 于 指定 链接 页 面 的 打开 方式 ， 其 取 值 如 表 2.7 所 示 。 


表 2.7 target 取 值 表 


属性 取 值 打开 方式 
_self 在 当前 窗口 打开 链接 ， 默 认 方 式 
_blank 在 新 的 窗口 中 打开 链接 
_top 在 顶层 框架 中 打开 链接 
_parent 在 当前 框架 的 上 一 层 打开 链接 





目前 常用 的 取 值 有 _self 和 _blank 两 种 ， 接 下 来 通过 案例 来 演示 这 两 种 取 值 的 功能 ， 
如 例 2-19 所 示 。 
【 例 2-19】 _self 和 _blank 两 种 取 值 的 功能 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 链 接 标 签 </title> 

</head> 

<body> 

<a href="2-3.html" target=" self"> 当 前 窗口 打开 链接 </a> 
<a href="2-3.html"” target=" blank"> 新 窗口 打开 链接 </a> 
</body> 

</html> 


Dowamnuwm 必 wmN PP 
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运行 结果 如 图 2.27 所 示 。 











[0 i - 
GC | © filey//DVHTMLexample/chapter02/2-3.html 前 | = 











扣 丁 学 堂 


扣 丁 学 堂 是 于 国 于 培训 教育 品牌 领导 者 ,所 有 最 新 最 全 的 林 培 训 视 频 课 
程 .专注 于 发 布 和 更 新 iOS 培 训 ，Android 培 训 ，HTML5 培 训 ，U! 缮 
训 、PHP 培 训 视 频 教 程 , 者 力 于 培养 移动 互联 网 人 才 。 


遇 到 末 技 术 难 题 ， 就 上 扣 了 本 学堂 。 


已 | © fileyj/D/HTMLexample/chapter02/2-3.html 
扣 丁 学 堂 是 下 国 林 培训 教育 品牌 统 导 者 ,拥有 最 新 最 全 的 村 培训 视频 课 
程 ,专注 于 发 布 和 更 新 iOS 培 训 ，Android 培 训 ，HTML5 培 训 。UI! 铸 
训 。PHP 培 训 视 频 教 程 , 看 力 于 培养 移动 互联 网 人 才 。 
过 到 [技术 难题 ， 就 上 扣 丁 学 堂 。 














图 2.27 target 属性 的 显示 效果 


一 般 情 况 下 ，target 只 用 到 “_self ”和 “_blank” 这 两 个 属性 值 ， 其 他 两 个 属性 值 不 
需要 深入 研究 ， 因 为 其 他 两 个 属性 值 利用 率 极 低 。 


2.3.9 列表 标签 


列表 是 网 页 中 一 种 常用 的 数据 排列 方式 ， 在 网 页 中 到 处 都 可 以 看 到 列表 的 身影 ， 列 
表 展 示 效 果 如 图 2.28 和 图 2.29， 都 是 网 页 中 常见 的 列表 。 
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干 锋 故事 MopE :> 
-大学 生育 斗 拉 后 的 衬 户 千 笑 安 三 培 

:大专 生 存 千 竹 HTM1L5 培 训 | 的 襄 斗 之 路 

-并 工作 胸 到 问题 怎么 办 ? 千 锋 HTML5 境 
"PHP 培训 后 薪资 是 多 少 ? 干 锋 学 员 月 薪 

:大 学 生 的 亲身 体会 感谢 干 锋 PHP 培 训 
-敢于 突破 向 前 干 笑 HTML5 学 员 14K 高 


2.28 ”列表 展示 效果 


[ 训 ] Python 培 训 束 业 班 04.24 国 国 “1 各 】 PHP+ 服 务 咏 生 妊 。 0327 国 到 【7] JavafE 坟 Wt 业 于 0327 国 到 





【 寺 ] VR/AR 培 训 咕 业 班 05.15 TI JavaEE 培 训 惑 业 班 。 0417 TFTHTML5 培 W 吕 Bt 0327EEB 
【于 ] 大 数据 开发 0227E UF) UsaiaitaWl 0424 TI] HTML5 培 Wl 不 糙 ”0417 国 本 
[】 JavaEE 培 Wk 班 。 03.27 { 深 】 HTML5 培 训 肢 业 班 03.27 了 1 JavaEE 培 就 得 。 04.24 
【 束 ] PHP+ 服 号 器 炸 群 04.17 [RAndroldailotyk 03.13 国正 CIW) UaeW 002720 


[ 节 】UI 妆 瑟 设 计 培 训 0424 [Pl Uzia 计 培训 。 0220 目 四 。。【 运 】 HTML5 培 WtyL 班 0327 
【未 ] HTMLS 培 W 业 班 0327 国 时 [PF] RTMLS 培 mR 04.10 【 连 ] JavaEE 培 训 就 业 班 。 05.02 
【 武 】 JavatE 培 WW 业 煤 。 邮 .17/ 
【起 】 HTML5 培 WM 就业 下 “05.15 国 到 





【各 】 HIML5 培 吕 现 加 直 04.2/ E 下 【入 1 PHP+ 并 务 凡 保持 
CF) Androld 培 WE 0227 上 四 【六 ] JavaEEISilS 业 得 


图 2.29 列表 展示 效果 


HTML 中 列表 分 为 有 序列 表 、 无 序列 表 和 定义 列表 三 种 。 
1， 有 序列 表 


在 HTML 中 用 <ol> 标 签 表示 有 序列 表 ， 列 表 项 目 用 <li> 标 签 表 示 ， 列 表 项 目 有 先后 
顺序 之 分 ， 因 此 称 为 有 序列 表 。 接 下 来 通过 案例 来 了 解 有 序列 表 ， 如 例 2-20 所 示 。 
【 例 2-20】 有 序列 表 的 演示 案例 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 链 接 标 签 </title> 
</head> 

<body> 

<ol> 

<1i>HTML</1i> 


oooDNDp 
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10 <1i>C55</ALi> 

11 <li>JavaSscript</1i> 
12 <li>PHP</1i> 

13 <li>JAVA</1i> 

14 </ol> 

15 </body> 

16 </html> 


运行 结果 如 图 2.30 所 示 。 









口 链接 标签 
€ CGO file: 


x 是 


D:/HTMLexample/chapter02/2-20.html 会 


























1. HTML 
过 SS 

3. JavaScript 
4. PHP 
5.JAVA 





图 2.30 有 序列 表 展 示 效 果 


图 2.30 中 可 以 看 到 前 面 的 阿拉 伯 数 字 是 默认 效果 ， 可 以 通过 有 序列 表 的 type 属性 
来 设置 不 同 的 显示 效果 ， 有 序列 表 type 属性 取 值 表 取 值 如 表 2.8 所 示 。 


表 2.8 有 序列 表 type 属性 取 值 表 





接 下 来 通过 案例 来 演示 type 属性 的 用 法 ， 如 例 2-21 所 示 。 
【 例 2-21】 type 属性 用 法 的 演示 案例 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 列 表 标签 </title> 
</head> 

<body> 

<ol type="a"> 
<1i>HTML</1i> 
<1i>CSS</1i> 


虽 omwaum 必 wmwN 


-= 
[= 
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11 <li>JavaScript</1i> 
12 <li>PHP</1i> 

13 <li>Java</1i> 

14 </ol> 

15 </body> 

16 </html> 


运行 结果 如 图 2.31 所 示 。 





> GG | @ gile:///D:/HTMLexample/chapter02/2-21. html 六 








a. HTML 

b. CSS 

c. JavaScript 
d. PHP 

e. Java 





图 2.31 有 序列 表 展示 效果 


在 有 序列 表 中 , 除了 type 属性 之 外 , 还 可 以 为 <ol> 定 义 start 属性 用 于 规定 项 目 符号 
的 起 始 值 ， 为 <li> 定 义 value 属性 用 来 规定 项 目 符号 的 数字 。 

以 上 的 效果 都 是 HTML 自 带 效果 ， 如 果 效 果 上 有 更 多 的 需求 ， 可 以 配合 CSS 来 完 
成 ， 例 如 CSS 美化 有 序列 表 如 图 2.32 所 示 ， 读 者 可 以 在 学 习 完 CSS 后 再 来 实现 。 


排名 球 队 场次 胜 笠 和 
回 滴 ” 呈 守信 里 里 27 20 5 2 
融 ”已 室 5 28 19 6 3 
和 和 守 维 Hl 28 17 6 5 
四 猎 马德里 竞技 28 i6 7 5 
也 | 载 。 比 有 本 要 亚 尔 28 13 9 6 
6| 圳 。” 有 呈 赤 社 会 28 15 3 10 
"| 副 。 # 伙 巴 可 28 13 5 10 


图 2.32 ”CSS 美化 有 序列 表 


2. 无 序列 表 
在 HTML 中 用 <ul> 标 签 表示 无 序列 表 ， 列 表 项 目 用 <li> 标 签 表示 ， 列 表 项 目 没有 先 
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序 之 分 ， 因 此 称 为 无 序列 表 。 接 下 来 通过 案例 来 演示 无 序列 表 ， 如 例 2-22 所 示 。 
【 例 2-22】 无 序列 表 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset=”utf-8”> 
<title> 列 表 标签 </title> 
</head> 

<body> 

<ul> 

<l1i>HTML</1i> 

10 <1i>CSS</1i> 

11 <li>JavaScript</1i> 
2 <I>PHP</ALI> 

13 <li>JAVA</1i> 

14 </ul> 

15 </body> 

16 </html> 


行 结果 如 图 2.33 所 示 。 


oamwmmwmN 


(a 


口 列表 标签 x 


和 © | @ tile:///D:/HTMLexample/chapter02/2-22.html 从 | : 





HTML 
CSS 
Javascript 
PHP 
JAVA 








2.33 ”无 序列 表 展 示 效果 


与 有 序列 表 类 似 ， 读 者 可 以 看 到 ， 在 默认 情况 下 无 序列 表 前 面 会 有 一 个 黑色 的 小 圆 
这 同样 可 以 通过 type 属性 修改 其 显示 效果 ， 无 序列 表 type 属性 取 值 如 表 2.9 所 示 。 


表 2.9 无 序列 表 type 属性 取 值 表 


属性 取 值 显示 效果 
disc〈 默 认 值 ) 实心 圆 (@) 
circle 空心 圆 (O) 
square 实心 正方 形 〈 国 ) 





接 下 来 通过 案例 来 演示 无 序列 表 type 属性 取 值 ， 如 例 2-23 所 示 。 
【 例 2.23】 无 序列 表 type 属性 取 值 的 演示 案例 。 
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<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 列 表 标签 </title> 
</head> 

<body> 

<ul type="circle"> 
<1i>HTML</1i> 

10 <li>Css</1i> 

11 <li>JavaScript</1i> 

LT2 <1i>PHP<AII> 

13 <li>JAVA</1i> 

14 </ul> 

15 </body> 

16 </html> 


运行 结果 如 图 2.34 所 示 。 


OOoNp 











JavaScript 
PHP 
JAVA 





图 2.34 无 序列 表 展 示 效果 
<li><li> 之 间 相 当 于 一 个 容器 ， 可 以 容纳 所 有 的 元 素 。 但 是 <ul><mul> 中 只 能 嵌 套 
<li></li>， 不 允许 直接 在 <ul></ul> 标 记 中 输入 文字 。 
3， 定 义 列表 
定义 列表 通常 用 于 对 专业 术语 或 名 词 进行 解释 和 描述 ， 与 有 序列 表 和 无 序列 表 不 
同 ， 定 义 列表 项 目前 没有 任何 项 目 符号 。 其 语法 如 下 : 


<dl> 
<dt> 定 义 名 词 </dt> 
<dd> 名 词 解 释 和 描述 </dd> 


上 面 的 语法 中 ，<dl></d 户 标签 用 于 定义 列表 ，<dt></d 必 和 <dd></dd> 并 列 嵌 套 于 
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<dl></d> 中 ， 其 中 <dt></d> 标 签 用 于 定义 专业 术语 或 名 词 ，<dd></dd> 标 签 用 于 对 名 词 
进行 解释 和 描述 。 一 对 <d></d 忆 可 以 对 应 多 对 <dd></dd>， 即 一 个 名 词 可 以 有 多 个 解释 
和 描述 。 接 下 来 通过 案例 来 演示 定义 列表 ， 如 例 2-24 所 示 。 

【 例 2-24】 定义 列表 的 演示 案例 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 列 表 标 签 </title> 
</head> 

<body> 

<dl> 


oamwm 必 wb 


ke 


<dt>HTML</dt> 

10 <dd> 超 文本 标记 语言 </dd> 
Ul <dt>css</dt> 

U2 <dq> 层 全 样式 表 </ dd> 

he <dt>JavaScript</dt> 
14 <dd> 网 页 脚本 语言 </dd> 
15 </dl> 

16 </body> 

17 </html> 


了 结果 如 图 2.35 所 示 。 


、 二 和 


口 列表 标签 x 


€ @ |© file:///D:/HTMLexample/chapter02/2-24.htnl 食 











HTML 


超 文本 标记 语言 
CSS 


层 有 样式 表 
JavaScript 
网 页 脚本 语言 





2.35 ”定义 列表 展示 效果 


定义 列表 在 实际 开发 中 不 常用 ， 大 多 数 情 况 还 是 使 用 有 序列 表 和 无 序列 表 ， 后 面 章 
节 中 还 会 详细 讲解 HIML 标签 使 用 规范 。 


2.3.10 <div> 与 <span> 


div 全 称 为 division， 表 示 “ 分 割 、 分 区 ”之 意 ，<div> 标 签 用 来 划分 一 个 区 域 ， 相 当 
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于 一 块 区 域 容器 ， 可 以 容纳 段落 、 标 题 、 表 格 、 图 像 等 各 种 网 页 元 素 。 即 HTML 中 大 多 
数 的 标签 都 可 以 嵌 套 在 <div> 标 签 中 ，<div> 中 还 可 以 嵌 套 多 层 <div>， 用 来 将 网 页 分 割 成 
独立 的 、 不 同 的 部 分 ， 来 实现 网 页 的 规划 和 布局 。 图 2.36 为 阿里 汽车 和 潮 电影 网 站 的 布 
局 。 这 些 都 是 使 用 <div> 标 签 来 实现 的 。 











准 新 车 更 划算 
而 加 汽车 亲民 价 买好 车 海量 商品 特价 来 效 


科 托 估 货 霹 品 内 购 今 有 得 所 


本 机 右 人 限时 人 从 We 





气 车 村 执 冶 散 槐 集 合 


2.36 淘宝 网 区 块 展示 效果 


接 下 来 通过 案例 来 简单 演示 <div> 标 签 的 使 用 ， 如 例 2-25 所 示 。 
【 例 2-25】 <div> 标 签 使 用 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>div/span</title> 
</head> 
<body> 
<div> 区 域 1 
<p> 这 是 一 个 段落 </p> 
0 </div> 
1 <div> 区 域 2 
12 ”<h6> 这 是 一 个 段落 </h6> 
3 </div> 
14 <div> 区 域 3 
5 <hr align="left" width="50" color="#00FF66"> 
6 </div> 
7 
8 


Ooo 


</body> 
</html> 





运行 结果 如 图 2.37 所 示 。 
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图 2.37 div 标签 展示 效果 
<span> 标 签 是 用 来 修饰 文字 的 ， 也 叫 作 内 联 标 签 ， 如 图 2.38 所 示 。 


育 < 言 网 >- 二 品 


于 钙 教 育 致力 于 打造 [教育 全 产业 柑 人 才 服 务 平 音 ， 全 国人 1 个 
分 校 ， 年 培养 优质 人 才 20000 余 人 ， 竹 用 100% 全 程 面 援 高 品 所 、 高 
成 本 培养 模式 ,教学 大 轴 紧 中 企业 需求 ， 拥 有 全 国 一 体 化 就 业 保 障 
pp 服务 ， 广 梁 平均 幕 水 普 访 达到 8000 元 以 上 。 千 接 价 值 观 * 做 育 详 的 自 
干 锋 教育 已 ,用 良心 做 教育 "。 


Www.qfedu,rom 
wwwqfiedi com 201703 ” -品牌 广告 





2.38 干 锋 教育 文字 修饰 效果 


接 下 来 通过 案例 来 演示 <span> 标 签 ， 如 例 2-26 所 示 。 
【 例 2-26】 <span> 标 签 的 演示 案例 。 


1 <!doctype html> 

加 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>div/span</title> 
6 </head> 

流 <body> 

8 ”<span>》 文 字 修饰 1</span> 
9 ”<span>》 文 字 修饰 2</span> 
10 ” <span> 文字 修饰 3</span> 
11 </body> 

12 </html> 


运行 结果 如 图 2.39 所 示 。 
<div> 标 签 和 <span> 标 签 ， 多 数 情况 下 需要 配合 CSS 样式 ， 在 后 续 的 章节 中 ， 再 详 
细 地 讲解 <div> 标 签 和 <span> 标 签 的 用 法 。 









[LEIIEISIEES 






[| x (SS 


和 和 CC | © sile: /D:/HIMLexample/chapter02/2-26. html 女 | 日 


文字 修饰 1 文字 修饰 2 文字 修饰 3 
















图 2.39 span 标签 展示 效果 
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24 本 章 小 结 


通过 本 章 的 学 习 ， 首 先 介绍 HTML 语法 的 发 展 历史 和 HTML 语义 化 的 含义 ， 然 后 
对 HTML 常用 标签 进行 了 讲解 , 如 标题 、 段 落 、 列 表 等 。 通过 本 章 的 学 习 , 能 掌握 HIML 
常用 标签 ， 能 初步 编写 基本 的 HIML 网 页 。 


2.5 习 题 
1， 填 空 题 
(1) 网 页 加 载 时 常用 图 片 的 格式 为 、，  、_  。 
(2) 图 像 标 签 的 属性 src 用 于 指定 图 像 和 的 属性 。 
(3) 文件 的 路 径 可 以 分 为 和 两 种 。 
(4) <strong> 标 签 强调 文本 。 
(5) 是 为 了 实现 HMTL 向 XML 过 渡 ， 让 作者 按照 统一 的 风格 来 编写 
标签 。 
2， 选择 题 
(1) 在 一 个 网 页 中 ， 只 能 出 现 一 次 的 标题 标签 是 (  )。 
A. <hl> B. <h2> C. <h3> D. <h4> 
(2) a 标签 的 target 属性 中 是 在 一 个 全 新 的 空白 窗口 中 打开 链接 的 是 (。 )。 
A. _self B. _blank C. top D. parent 
(3) 定义 列表 不 包括 下 面 哪个 标签 ? (  ) 
A. <dl> B. <d> C. <dd> D. <ol> 
(4) 强调 字体 是 斜体 的 标签 是 (  ”)。 
A. <sup> B. <del> C. <em> D. <strong> 
(5) 设置 水 平 线 对 齐 方式 的 属性 是 (。 )。 
A. size 了 .align C. width D. color 
3， 思 考题 


(1) 请 简 述 什么 是 HIML 语义 化 。 
(2) 请 简 述 有 序列 表 与 无 序列 表 之 间 的 区 别 。 
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HTML 表格 与 表单 


本 章 学 习 目 标 

。 掌握 HTML 表格 的 基本 使 用 ; 

。 掌握 HTML 表单 的 基本 使 用 ; 

。 了 解 前 端 与 后 端 如 何 交互 与 通信 。 

表格 主要 用 途 是 以 网 格 的 形式 显示 二 维 数据 ，HTML 早期 版 本 中 ， 常 用 表格 来 控制 
页 面 的 内 容 布局 ， 表 单 是 HTML 中 获取 用 户 输入 的 手段 。 它 对 于 Web 应 用 系统 极其 重 
要 。 表 单 的 出 现 则 使 网 页 从 单 向 的 信息 传递 发 展 到 能 够 与 用 户 进行 交互 对 话 。 本 章 将 对 
表格 和 表单 的 相关 知识 进行 详细 讲解 。 


3.1 HTML 表格 


生活 中 ， 经 常 使 用 表格 来 统计 数据 和 信息 ， 这 样 可 以 更 清晰 地 显示 数据 或 信息 ， 同 
理 在 制作 网 页 时 ， 为 了 有 条 理 地 显示 网 页 中 的 元 素 ， 可 以 使 用 表格 对 网 页 进行 布局 和 规 
划 ， 从 而 可 以 给 浏览 者 展示 大 量 且 清 晰 的 排列 数据 。 表 格 在 网 页 中 应 用 得 极其 广泛 ， 下 
面 先 来 看 下 网 页 中 表格 的 展示 效果 ， 如 图 3.1 和 图 3.2 所 示 。 





J 2 em wi | 

| 2 W17081301€ 生生 = wy a 15000 LB 主 覃 

| ye NM er se 
toon ae 6 wes aa 

| TU mr 

| wm， Te am 加 um 必 om 

| STIG 人 Fe Wr " Woo = pr 


图 3.1 网 页 中 表格 的 展示 效果 
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图 3.2 网 页 中 表格 的 展示 效果 


3:1:1 


每 个 表格 有 三 个 必须 的 标签 ， 


表格 基本 结构 


法 格式 如 下 : 


<table> 


<Er> 
<td> 单 元 格 内 容 </tqd> 


</tr> 


</table> 


上 面 三 个 标签 是 创建 表格 的 基本 标签 ， 其 中 <table></table> 标 签 用 于 定义 一 个 表格 。 
<tr> 标 签 用 于 定义 表格 中 的 一 行 ， 必 须 嵌 套 在 <table></table> 标 签 中 ， 在 <table></table> 
标签 中 包含 几 对 <tr></tr>， 表 示 该 表格 有 几 行 。<td></td> 标 签 用 于 定义 表格 中 的 单元 格 ， 
必须 嵌 套 在 <tr></tr> 标 签 中 ， 一 对 <tr></tr> 包 含 几 对 <td></td>， 表 示 该 行 中 有 多 少 个 单 
元 格 ( 列 )。 

接 下 来 通过 案例 来 演示 定义 表格 标签 ， 如 例 3-1 所 示 。 


【 例 3-1】 定义 表格 标签 的 演示 案例 。 


[> 


从 加 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表格 </title> 
</head> 
<body> 
<table> 
EE 
<td> 单 元 格 1</td> 
<td> 单 元 格 2</td> 
</tr> 
<tr> 
<td> 单 元 格 1</td> 
<td> 单 元 格 2</td> 
</EE 
</table> 
</body> 
</html> 


运行 结果 如 图 3.3 所 示 。 
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<table>、<tr> 和 <td> 三 个 标签 ， 用 来 创建 表格 ， 其 语 
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图 3.3 表格 标签 展示 效果 


表格 内 除了 可 以 添加 文本 外 ， 还 可 以 添加 其 他 标签 元 素 ， 如 : 图 片 、 列 表 、 段 落 等 。 
接 下 来 通过 案例 来 演示 ， 如 例 3-2 所 示 。 
【 例 3-2】 在 表格 内 添加 其 他 标签 元 素 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>HTML 表格 </title> 

</head> 

<body> 

<table> 

<EtE> 

0 <td><img src="tianqi 1.png"></td> 
于 <td><p> 今 天 天 气 晴 ， 温 度 适宜 ， 适 合 出 行 。</p></td> 
12 </tr> 
ie] <Er> 
4 <td><img src="tianqi 2.png"></td> 
1 <td> 今 天 有 雨 ， 出 门 记得 带 企 。</td> 

</tr> 
</table> 
</body> 
</html> 


运行 结果 如 图 3.4 所 示 。 
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着 今天 天 气 晴 ,温度 适 宣 ,适合 出 行 。 


> 今天 有 十， 出 门 记 得 党 ， 


图 3.4 带 图 片 和 段落 的 表格 展示 效果 
例 3-1 和 例 3-2 在 默认 情况 下 表格 是 没有 边框 的 。 如 果 想 要 给 表格 添加 边框 ， 可 以 
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设置 表格 的 border 属性 ， 数 值 为 边框 的 宽度 。 接 下 来 通过 案例 来 演示 ， 如 例 3-3 所 示 。 
【 例 3-3】 设置 表格 边框 的 演示 案例 。 


业 <!doctype html> 

多 <html> 

全 <head> 

4 <meta charset="utf-8"> 

已 <title>HTML 表格 </title> 

6 </head> 

<body> 

8 <table border="1"> 

Ce) <Er> 

10 <td><img src="tiangi 1.png"></td> 
ll <tqd><p> 今 天 天 气 晴 ， 温 度 适宜 ， 适 合 出 行 。</p></td> 
汪 全 </tr> 

13 <tr> 

14 <td><img src="tianqi 2.png"></td> 
15 <td> 今 天 有 雨 ， 出 门 记得 带 伞 。</td> 

16 </tr> 

17 </table> 

18 </body> 

19 </html> 


运行 结果 如 图 3.5 所 示 。 
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| 车 上 | 今天 天 气 晴 ,温度 适宜 , 适合 出 行 。 


























| 二 i | 信 天 有 十 , 出 门 记 得 党 个 。 











图 3.5 ” 带 边框 的 表格 展示 效果 


3.1.2 ” 表 头 与 标题 


为 了 使 表格 的 格式 更 清晰 方便 读者 查阅 ， 应 用 表格 时 经 常 需要 为 表格 设置 表 头 ， 表 
头 <th> 是 <td> 单 元 格 的 一 种 标题 ， 其 本 质 还 是 一 种 单元 格 ， 一 般 位 于 表格 的 第 一 行 或 第 
一 列 ， 用 来 表明 这 一 行 或 列 的 内 容 类 别 。 浏 览 器 会 将 表 头 默认 以 粗 体 居中 的 样式 显示 在 
网 页 中 。 接 下 来 通过 案例 来 演示 表格 的 表 头 ， 如 例 3-4 所 示 。 

【 例 3-4】 设置 表格 的 表 头 的 演示 案例 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 头 与 标题 </title> 
</head> 
<body> 
<table border="1"> 
< 
<th> 天 气 现象 </th> 
<th> 出 行情 况 </th> 
</tr> 
<Er> 
<td><img src="tiangi 1.png"></td> 
<td><p> 今 天 天 气 晴 ， 温 度 适宜 ， 适 合 出 行 。</p></td> 
< /tr 
17 <Er> 
18 <td><img src="tiangi 2.png"></td> 
9, <td> 今 天 有 雨 ， 出 门 记得 带鱼。</td> 
20 </tr> 
21 </table> 
22 </body> 
23 </html> 


运行 结果 如 图 3.6 所 示 。 
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天 气 现象 出 行情 况 








今天 天 气 晴 ,温度 适宜 ， 适合 出 行 。 








| 今天 有 雨 ， 出门 记得 带 全 ， 























图 3.6 带 表 头 的 表格 展示 效果 


<th> 标 签 和 <td> 在 本 质 上 都 是 单元 格 , 但 这 两 种 不 可 以 互 换 使 用 。th, 即 “table header 
( 表 头 单元 格 )”。 而 td， 即 “table data (单元 格 )”。 

表格 一 般 都 有 一 个 标题 ， 用 来 表明 表格 的 内 容 ， 一 般 位 于 整个 表格 的 第 一 行 ， 使 用 
<caption> 标 签 。 一 个 表格 只 能 含有 一 个 表格 标题 。 接 下 来 通过 案例 来 演示 表格 标题 ， 如 
例 3-5 所 示 。 

【 例 3-5】 设置 表格 标题 的 演示 案例 。 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 表 头 与 标题 </title> 

</head> 

<body> 

<table border="1"> 
<caption> 天 气 预报 </caption> 

10 <tr> 

1 <th> 天 气 现象 </th> 

2 <th> 出 行情 况 </th> 

13 </tr> 

14 <tr> 

5 <td><img src="tianqi 1.png"></td> 

16 <td><p> 今 天 天 气 晴 ， 温 度 适宜 ， 适 合 出 行 。</p></td> 

17 </tr> 

18 ETS 

19 <td><img src="tiangi 2.png"></td> 

20 <td> 今 天 有 雨 ， 出 门 记 得 带 企 。</td> 

21 </tr> 

22 </table> 

23 </body> 

24 </html> 


运行 结果 如 图 3.7 所 示 。 
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天 气 预报 
出 行情 况 














今天 天 气 睛 ， 温 度 适宜 ， 适 各 出 行 。 








| 今天 有 雨 ,出门 记 得 带 全 。 





























3.7” 带 标题 的 表格 展示 效果 


3.1.3 表格 语义 化 


为 了 使 网 页 内 容 更 好 地 被 搜索 引擎 理解 ， 在 使 用 表格 进行 布局 时 ，HIML 中 引入 了 
<thead>、<tbody> 和 <tfoot> 这 三 个 语义 化 标签 ， 用 来 将 表格 划分 为 头 部 、 主 体 和 页 脚 三 
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部 分 。 用 这 三 个 部 分 来 定义 网 页 中 不 同 的 内 容 ， 三 个 标签 的 详细 理解 如 下 。 

。 <thead></thead> 标 签 : 用 于 定义 表格 的 头 部 ， 位 于 <table></table> 标 签 中 ， 一 般 
包含 网 页 的 logo 和 导航 等 头 部 信息 。 

。 <tfoot></tfoo 忆 标签 : 用 于 定义 表格 的 页 脚 ， 位 于 <table></table> 标 签 中 。 
<thead></thead> 标 签 之 后 ， 一 般 包 含 网 页 底部 的 企业 信息 等 。 

。 <tbody></tbody> 标 签 : 用 于 定义 表格 的 主体 ， 位 于 <table></table> 标 签 中 。 
<tfoot></tfoot> 标 签 之 后 ， 一 般 包 含 网 页 中 除 头 部 和 底部 以 外 的 其 他 内 容 。 

接 下 来 通过 案例 来 演示 表格 语义 化 的 三 个 标签 ， 如 例 3-6 所 示 。 

【 例 3-6】 定义 表格 语义 化 的 三 个 标签 的 演示 案例 。 





bp <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 表 格 语义 化 </title> 

6 </head> 

本 <body> 

8 <table border="1"> 

9 <caption> 天 气 预 报 </caption> 

0 <thead> 

入 二 让 下 学 

12 <th> 天 气 现象 </th> 

3 <th> 出 行情 况 </th> 

4 <AEr 

5 </thead> 

6 <tbody> 

7 <tr> 

8 <td><img src="tianqi 1.png"></td> 
9 <td><p> 今 天 天 气 晴 ， 温 度 适宜 ， 适 合 出 行 。</p></td> 
20 </tr> 
21 <tr> 
2 <td><img src="tianqi 2.png"></td> 
2 <tq> 今 天 有 雨 ， 出 门 记得 带 伞 。</td> 
24 </tr> 
25 </tbody> 
26 <tfoot> 
5 </tfoot> 


28 </table> 
29 </body> 
30 </html> 


运行 结果 如 图 3.8 所 示 。 
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天 气 预报 
[天气 现象 出 行情 况 














今天 天 气 晴 ， 温 度 适 宜 ， 适 全 出行 。 








今天 有 雨 ， 出 门 记得 带 全 。 





























图 3.8 语义 化 的 表格 展示 效果 


由 例 3-6 可 以 发 现 , 语义 化 表格 效果 上 并 没有 什么 变化 ,<thead>、<tbody> 和 <tfoot> 
三 个 标签 不 带 任 何 效果 ， 只 是 更 好 地 提供 了 语义 化 的 功能 ， 根 据 表格 的 需求 尽量 添加 相 
应 的 语义 化 标签 。 需要 注意 <thead>、<tfoot> 这 两 个 标签 在 一 个 <table> 标 签 中 只 能 出 现 一 
次 ， 而 <tbody> 标 签 可 以 出 现 多 次 。 


3.1.4 合并 行 与 列 


在 Word 中 设计 表格 时 ， 有 时 需要 将 两 个 或 多 个 的 相 邻 单元 格 组 合成 一 个 单元 格 ， 
即 合并 单元 格 的 操作 。 在 HTML 中， 也 需要 用 到 “表格 合并 行 ” 和 “表格 合并 列 ”。 合 
并 行使 用 <td> 标 签 的 rowspan 属性 ， 而 合并 列 则 用 到 <td> 标 签 的 colspan 属性 。 接 下 来 通 
过 案例 来 演示 表格 合并 列 ， 如 例 3-7 所 示 。 

【 例 3-7】 设置 表格 合并 列 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 合 并 行 与 列 </title> 
</head> 
<body> 
<table border="1"> 
<caption> 天 气 预 报 </caption> 
<thead> 
<Er> 
<th colspan="2"> 日 期 </th> 
<th> 天 气 现象 </th> 
<th> 出 行情 况 </th> 
</tr> 
</thead> 
<tbody> 
SEE> 
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pp 
-oo 


FRR PR PP 
全 SECRET 


58 TML5 从 入 门 到 精通 


19 <tqd>22 日 星期 五 </td> 

20 <td> 白 天 </td> 

2 <td><img src="tianqi 1.png"></td> 

22 <td><p> 今 天 天 气 晴 ， 温 度 适 宜 ， 适 合 出 行 。</p></td> 
23 <JIET> 

24 <tr> 

25 <td>22 日 星期 五 </td> 

26 <td> 夜 间 </td> 

这 <td><img src="tianqi 2.png"></td> 

28 <td><p> 今 天 有 雨 ， 出 门 记得 带 伞 。</p></tqd> 
29 </Er> 

30 </tbody> 

31 <tfoot> 

32 </tfoot> 

33 </table> 

34 </body> 

35 </html> 


运行 结果 如 图 3.9 所 示 。 
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天 三 预报 
日 其 | 出 行情 况 


今天 天 气 晴 ， 温度 适宜 ， 适合 出 行 。 




















今天 有 十 ,出门 记 得 带 信 。 






































图 3.9 和 并 列 的 表格 展示 效果 


例 3-7 中 ， 第 12 行 设置 colspan 属性 值 为 2， 用 来 合并 表格 中 的 两 列 单元 格 。 接 下 
来 通过 案例 来 演示 合并 行 ， 如 例 3-8 所 示 。 
【 例 3-8】 设置 合并 行 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 合 并 行 与 列 </title> 
</head> 

<body> 

<table border="1"> 


OOoODNDp 
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9 <caption> 天 气 预报 </caption> 

10 <thead> 

Ji < 

pe <th colspan="2"> 日 期 </th> 

TS <th> 天 气 现象 </th> 

14 <th> 出 行情 况 </th> 

ls 天 > 

16 </thead> 

7 <tbody> 

18 <EFE> 

19 <td rowspan="2">22 日 星期 五 </td> 
20 <td> 白 天 </td> 

2 <td><img src="tianqi 1.png"></td> 


人 

| </tr> 

24 ET 

25 

26 

27 

28 <AEr> 

29 </tbody> 
30 <tfoot> 
31 </tfoot> 
32 </table> 

33 </body> 

34 </html> 


<td><p> 今 天 天 气 晴 ， 温 度 适宜 ， 适 合 出 行 。</p></td> 


<td> 夜 间 </td> 
<td><img src="tianqi 2.png"></td> 
<td><p> 今 天 有 雨 ， 出 门 记得 带 伞 。</p></td> 


运行 结果 如 图 3.10 所 示 。 
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白天 | 秆 FE “| 今天 天 气 晴 ， 温度 适宜 , 适合 出 行 。 













| 今天 有 十 ， 出 门 记 得 带 伞 。 















































图 3.10 合并 行 的 表格 展示 效果 
在 例 3-8 中 ， 第 19 行 设置 rowspan 属性 值 为 2， 即 合并 表格 中 的 两 行 单元 格 。 


3.1.5 ”单元 格 边 距 与 间距 


表格 还 有 用 于 控制 单元 格 边 距 与 间距 的 属性 ， 即 cellpadding 和 cellspacing 属性 。 
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cellpadding 属性 用 于 设置 单元 格 内 容 与 单元 格 边框 之 间 的 空白 间距 ， 默 认为 lpx; 
cellspacing 属性 用 于 设置 单元 格 与 单元 格 边框 之 间 的 空白 间距 , 默认 为 2px。 接 下 来 通过 
案例 来 演示 cellpadding 属性 ， 如 例 3-9 所 示 。 

【 例 3-9】 设置 cellpadding 属性 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


</head> 
<body> 


OOoNpp 


<tr> 
<td> 单 元 格 1</td> 
<td> 单 元 格 2</td> 
</tr> 
<*> 
<td> 单 元 格 1</td> 
i <td> 单 元 格 2</td> 
</tr> 
</table> 
18 </body> 
9 </html> 


运行 结果 如 图 3.11 所 示 。 


WLPO 





癌 单元 格 边 距 与 间距 
we © IO iile: 


<title> 单 元 格 边 距 与 间距 </title> 


<table border="1" cellpadding="30"> 





D:/HTMLexample/chapter03/3-9. html 








单元 格 1 


单元 格 2 
































3.11 


cellpadding 属性 展示 效果 


例 3-9 中 , 第 8 行将 cellpadding 属性 设置 为 30， 即 单元 格 内 容 和 单元 格 边 框 之 间 的 


空白 间距 为 30。 


3.1.6 ”表格 其 他 属性 





HTML 为 表格 提供 了 一 系列 的 属性 ， 用 于 控制 表格 的 显示 样式 ， 除 上 面 <table> 标 签 
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的 属性 ， 还 有 很 多 控制 单元 格 和 单元 格 内 容 的 属性 ， 具 体 如 表 3.1 所 示 。 


表 3.1 <table> 标 签 常用 属性 


设置 表格 的 宽度 像素 值 





设置 表格 的 高 度 像素 值 





设置 单元 格 内 容 的 水 平 对 齐 方式 | left ( 左 对 齐 )、enter (居中 对 齐 )、right ( 右 对 齐 ) 








baseline (基线 对 齐 )、top (上 对 齐 )、middle ( 居 
设置 单元 格 内 容 的 垂直 对 齐 方式 中 对 齐 )、bottom (下 对 齐 ) 


1. width 属性 


width 属性 可 以 设置 单元 格 的 宽度 ， 当 一 列 有 多 个 不 同 width 属性 值 时 ， 取 最 大 值 作 
为 这 一 列 的 宽度 。 接 下 来 通过 案例 来 演示 width 属性 ， 如 例 3-10 所 示 。 
【 例 3-10】 设置 width 属性 的 演示 案例 。 


吕 owamwmcwn 


卢 
co 





amwwmn Ph 


加 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 格 其 他 属性 </title> 
</head> 
<body> 
<table border="1"> 
< 
<td width="200"> 单 元 格 1</td> 
<td> 单 元 格 2</td> 
二 
ERE> 
<td width="100"> 单 元 格 1</td> 
<td> 单 元 格 2</td> 
SEr> 
</table> 
</body> 
</html> 


运行 结果 如 图 3.12 所 示 。 
































[2aJ[sIST 去 
中 志 格 其 他 尾 性 x 
€ C |© filey//D/HTMLexample/chapter03/3-10.html 广 
单元 格 1 单元 格 2 
痹 元 格 ! | 单 元 格 2 
































3.12 ”带宽 度 值 的 表格 展示 效果 
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2.height 属性 


height 属性 可 以 设置 单元 格 的 高 度 ， 当 一 行 有 多 个 不 同 height 属性 值 时 ， 取 最 大 值 
作为 这 一 行 的 高 度 。 接 下 来 通过 案例 来 演示 height 属性 ， 如 例 3-11 所 示 。 
【 例 3-11】 设置 height 属性 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 格 其 他 属性 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 

<td height="100"> 单 元 格 1</td> 
1 <td> 单 元 格 2</td> 

/LE> 
4 区 1 ET 
14 <td height="50"> 单 元 格 1</td> 
5 <td> 单 元 格 2</td> 
6 </tr> 
17 </table> 
</body> 
</html> 


运行 结果 如 图 3.13 所 示 。 


Oo DNDpp 
oo 














GC |@ file///D/HTMLexample/chapter03/3-11html 会 | : 











单元 格 1| 单 元 格 2 








单元 格 1| 单 元 格 2 





























图 3.13 ” 带 高 度 值 的 表格 展示 效果 


3. align 属性 
align 属性 可 以 设置 单元 格 的 内 容 左右 对 齐 方向 ,<th> 标 签 的 align 属性 默认 为 center， 
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<td> 标 签 的 align 属性 默认 为 left。<table> 标 签 也 有 align 属性 ， 用 来 设置 表格 在 网 页 中 
的 水 平 对 齐 方式 。 接 下 来 通过 案例 来 演示 ， 如 例 3-12 所 示 。 
【 例 3-12】 单元 格 和 单元 格 内容 使 用 align 属性 的 显示 效果 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 格 其 他 属性 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td width="200" align="center"> 单 元 格 1</td> 
<td> 单 元 格 2</td> 
</tr> 
3 Er 
4 <td width="100" align="right"> 单 元 格 1</td> 
Ts <td> 单 元 格 2</td> 
16 </tr> 
</table> 
</body> 
</html> 


运行 结果 如 图 3.14 所 示 。 
Os [lel 


车 守 相 基 他 层 作 x 改 王 


ownanum 必 wm 


卢 
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单元 格 1 单元 格 2 























单元 格 1| 单 元 格 2 











3.14” 带 左右 对 齐 的 表格 展示 效果 


4. valign 属性 


valign 属性 可 以 设置 单元 格 的 内 容 垂直 对 齐 的 方向 ， 默 认为 center( 居 中 对 齐 )。 接 下 
来 通过 案例 来 演示 valign 属性 的 使 用 ， 如 例 3-13 所 示 。 
【 例 3-13】 valign 属性 使 用 的 演示 案例 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


ODP 
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5 ”<title> 表 格 其 他 属性 </title> 
6 </head> 

7 <body> 

8 <table border="1"> 

9 


<tr> 
10 <td height="200" valign="top"> 单 元 格 1</td> 
ll <td height="100” valign="bottom"> 单 元 格 2</td> 
之 </tr> 
3 <EE> 
14 <td> 单 元 格 1</td> 
15 <td> 单 元 格 2</tq> 
16 过 ji 
17 </table> 
18 </body> 
19 </html> 


行 结果 如 图 3.15 所 示 。 


(a 














单元 格 1 



































3.15” 带 上 下 对 齐 的 表格 展示 效果 


到 此 已 经 学 习 了 HTML 表格 的 常用 标签 与 属性 , 如 果 想 要 做 出 一 些 更 加 漂亮 或 是 更 
多 需求 的 表格 ,还 需要 配合 CSS 才能 完成 ， 这 里 不 作 讲 解 ， 后 续 章 节 中 会 详细 介绍 如 何 
来 实现 效果 。 


3.2 HTML 表单 


表单 是 网 页 中 常用 的 一 种 展示 效果 ， 如 登录 页 面 中 的 用 户 名 和 密码 的 输入 、 登 录 按 
钮 等 都 是 用 表单 相关 的 标签 定义 的 。 表 单 是 HIML 中 获取 用 户 输入 的 手段 , 它 的 主要 功 
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能 是 收集 用 户 的 信息 ， 并 将 这 些 信息 传递 给 后 台 服 务 器 ， 实 现 网 页 与 用 户 的 交流 。 本 节 
将 详细 讲解 表达 使 用 ， 先 来 观察 微 博 登录 、 注 册页 面 表单 的 展示 效果 ， 如 图 3.16 所 示 。 


名 ES 








帐号 登录 安全 登录 气 各 + 手机 : | 国 -|0086 请 答 入 您 的 手机 号 
或 使 用 邮箱 注册 
内 妆 往 丛 员 帐号 三 机 号 设置 密码 ; 
六 Aes + 激活 码 。 况 训 区 了 失信 妆 到 
回 记 住 丢 忘记 密码 收 生 到 验证 码 ? 


还 没有 微 售 了 立 苛 主 汕 | 请 服务 使 用 协议 
福 博 个 人 信息 保护 政策 
其 E 登 录 : 回 量 侈 全 国生 区 全 国人 大 豪 要 会 关于 加 他 3 络 信息 悍 护 的 决定 





图 3.16 微 博 登录 、 注 册 展示 效果 


HTML 中 ， 一 个 完整 的 表单 通常 由 表单 元 素 、 提 示 信 息 和 表单 域 三 个 部 分 组 成 ， 下 
面 将 详细 介绍 这 三 个 部 分 。 

。 表单 元 素 : 包含 表单 的 具体 功能 项 ， 如 文本 输入 框 、 下 拉 列 表 框 、 复 选 框 、 密 码 
输入 框 、 登 录 按钮 等 。 

。 提示 信息 : 表单 中 通常 还 需 包含 一 些 说 明 性 的 文字 ， 提 示 用 户 要 进行 的 操作 。 

。 表单 域 : 用 来 容纳 表单 控件 和 提示 信息 ,可 以 通过 它 定 义 处 理 表单 数据 所 用 程序 
的 URL 地 址 ， 以 及 数据 提交 到 服务 器 的 方法 。 如 果 未 定义 表单 域 ， 表 单 中 的 数 
据 就 无 法 传送 到 后 台 服 务 器 。 

表单 元 素 是 表单 的 核心 ， 常 用 的 表单 元 素 如 表 3.2 所 示 。 





表 3.2 表单 元 素 
表单 元 素 含义 
<input> 表单 输入 框 ( 可 定义 多 种 表单 项 ) 
<textarea> 定义 多 行文 本 框 
<select> 定义 一 个 下 拉 列 表 ( 必 须 包含 列表 项 ) 
<label> 定义 表单 辅助 项 





这 里 先 简单 了 解 一 下 常用 的 表单 元 素 ， 后 面 的 小 节 将 会 进行 详细 讲解 。 
3.2.1 <form> 标 签 
为 了 实现 网 页 与 用 户 的 交流 ， 需 要 让 表单 中 的 数据 传送 给 后 台 服 务 器 ， 这 就 必须 定 


义 表 单 域 。 定 义 表单 域 用 <table> 标 签 定义 表格 类 似 ，HTML 中 <form> 标 签 用 于 定义 表单 
域 ,， 即 创建 一 个 表单 ， 用 来 实现 用 户 信 息 的 收集 和 传递 ，<form></form> 标 签 中 的 所 有 内 
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容 都 会 被 提交 给 服务 器 。 其 语法 格式 如 下 : 


<form 属性 属性 值 > 
表单 元 素 和 提示 信息 


</form> 


接 下 来 通过 案例 来 演示 <form> 标 签 的 简单 使 用 ， 如 例 3-14 所 示 。 
【 例 3-14】 <form> 标 签 的 简单 使 用 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 
姓名 :<input type="text"> 
10 性 别 ，<input type="radio"> 男 <input type="radio"> 女 
下 1 <input type="submit" value=" 提 交 "> 
12 </form> 
13 </body> 
14 </html> 


[Ee 


避 








3.17 ”<form> 标 签 展示 效果 


由 图 3.17 可 以 看 出 ，<form> 标 签 默认 情况 下 并 没有 什么 效果 ， 当 输入 完 姓 名 和 选择 
完 性 别 后 ， 单 击 提交 按钮 ， 就 可 以 把 填写 好 的 数据 提交 给 后 台 服 务 器 ， 服 务 器 经 过 处 理 
后 ， 将 数据 存储 进 网 站 的 数据 库 ， 这 样 数据 就 可 以 得 到 保存 。 

HTML 表单 将 数据 发 送 给 后 台 服 务 器 ,用 到 <form> 的 action、method、enctype 和 target 
属性 ， 下 面 详细 了 解 这 四 个 属性 。 


1. action 属性 


action 属性 是 用 来 定义 表单 数据 的 提交 地 址 ， 即 一 个 URL。HTML 表单 要 想 和 后 台 
服务 器 进行 连接 ， 就 需要 在 action 属性 上 设置 一 个 URL。 比 如 两 人 打 电 话 ， 双 方 要 通话 
就 必须 要 知道 对 方 的 电话 号 码 ，URL 就 相当 于 电话 号 码 。action 属性 用 于 指定 接收 并 处 
理 表单 数据 的 服务 器 的 URL 地 址 。 具 体 示例 如 下 。 
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<form action="qianfeng action.asp" 


表示 提交 表单 时 ， 表 单数 据 会 传送 到 qianfeng_ action.asp 的 页 面 处 理 。 
action 属性 值 可 以 是 相对 路 径 或 绝对 路 径 ， 还 可 以 是 接收 数据 的 E-mail 邮箱 地 址 。 
具体 示例 如 下 。 


<form action=qianfenge1000phone .com> 
表示 提交 表单 时 ， 表 单数 据 以 电子 邮件 的 形式 传递 出 去 。 
2. method 属性 


method 属性 是 用 来 定义 表单 数据 的 提交 方式 ， 常 用 的 有 get 默认 〉 和 post 两 种 方 
式 。 提 交 方 式 类似 于 通信 方式 ， 可 以 打 电 话 、 发 短信 或 发 邮件 。 一 般 情 况 下 ， 获 取 一 些 
数据 用 get 方式 ， 这 种 方式 提交 的 数据 将 显示 在 浏览 器 的 地 址 栏 中 ， 保 密 性 差 ， 且 有 数 
据 量 的 限制 。post 方式 的 保密 性 好 ， 而 且 无 数据 量 的 限制 ， 使 用 method- ”post 可 以 大 量 
提交 数据 。 


3，enctype 属性 


enctype 属性 是 用 来 定义 表单 数据 的 提交 内 容 形式 ， 常 用 的 有 application/x-www- 
form-urlencoded (默认 ) 和 multipart/form-data 两 种 方式 。 提交 内 容 可 以 是 网 页 中 的 文本 ， 
也 可 以 是 图 片 或 视频 等 非 文本 的 内 容 ， 因 此 需要 对 enctype 属性 选择 不 同 的 设置 。 


4，target 属性 


target 属性 是 用 来 定义 提交 地 址 的 打开 方式 ， 常 用 的 有 _self (默认 ) 和 _blank 两 种 方 
式 。 打 开 方 式 可 以 选择 当前 页 打开 ， 也 可 以 在 新 页 面 打开 ，<form> 标 签 中 的 target 属性 
跟 <a> 标 签 中 的 target 属性 一 样 ， 这 里 不 再 獒 述 。 

接 下 来 通过 案例 来 演示 <form> 标 签 的 四 个 常用 属性 ， 如 例 3-15 所 示 。 

【 例 3-15】 <form> 标 签 的 四 个 常用 属性 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 

<body> 


OOoODNDPpPp 


<formaction="demo.html"method="post"enctype="multipart/form-data™" 
target=" blank"> 
姓名 :<input type="text"> 
性 别 : <input type="radio"> 男 <input type="radio"> 女 
<input type="submit" value=" 提 交 "> 
</form> 


FF FF 
WwW N hh 口 
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14 </body> 
Te </html> 


运行 结果 如 图 3.18 所 示 。 
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姓名 性 别 : 入 男 号 女 | 开交 | 
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D:/HTMLexample/chapter03/demo.html 会 | } 

















CC |O sile: 





Hello world! 





3.18 ”<form> 标 签 展示 效果 


例 3-15 中 对 这 些 属性 并 没有 做 过 多 的 解释 与 演示 ,对 后 端 有 一 定 的 了 解 后 , 才能 更 
好 地 掌握 <form> 标 签 的 属性 ， 这 里 先 了 解 一 下 这 些 属性 ， 然 后 再 学 习 一 些 后 端 知 识 ， 那 
么 这 些 内 容 就 非常 容易 理解 了 。 


3.2.2 ”<input> 标 签 

网 页 中 经 常会 包含 有 单行 文本 框 、 单 选 按钮 、 复 选 框 、 提 交 按 钮 等 ， 要 想 定义 这 些 
表单 元 素 需 要 使 用 <input> 标 签 ， 其 基本 语法 格式 如 下 : 

<input type=" 元 素 类 型 "> 

1. type 属性 


<input> 标 签 通过 type 属性 取 值 不 同 ， 可 以 展示 出 不 同 的 表单 类 型 ， 其 属性 取 值 如 
表 3.3 所 示 。 


表 3.3 type 属性 取 值 





























表单 元 素 含 义 
text 单行 文本 框 
password 密码 文本 框 
Iadio 单 选 框 
checkbox 复 选 框 
button 按钮 

Submit 提交 按钮 
Teset 重 置 按钮 
hidden 隐藏 域 
image 图 像 形式 的 按钮 
file 文件 上 传 按钮 
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表 3.3 中 列 出 了 type 属性 的 取 值 及 含义 ， 下 面 将 分 别 讲解 这 些 属性 。 


(1) text、 password 


text 值 用 来 展示 单行 文本 框 ，password 值 用 来 展示 密码 文本 框 , 一般 用 于 登录 界面 ， 


接 下 来 通过 案例 来 演示 这 两 个 属性 值 ， 如 例 3-16 所 示 。 


【 例 3-16】 text 和 password 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 

用 户 名 :<input type="text"> 
10 密码 : <input type="password"> 
11 </form> 
12 </body> 
13 </html> 


运行 结果 如 图 3.19 所 示 。 


OOoDNDpp 








用 户 名 ; 密码 : 





3.19 ”text、password 展示 效果 


可 以 往 输 入 框 内 输入 内 容 ，password 值 中 的 字符 会 被 做 掩 码 处 理 〈 显 示 为 星 号 或 实 
心 圆 )， 如 图 3.20 所 示 。 









| 
VG Hm x 全 
© | © file///D/HTMLexample/chapter03/3-16html 家 | 3 















密码 : |…… 


3.20 ”text、password 输入 展示 效果 


(2) radio、checkbox 
radio 值 用 来 展示 单 选 框 ，checkbox 值 用 来 展示 复 选 框 ， 一般 在 调查 问卷 中 使 用 ， 接 


下 来 通过 案例 来 演示 这 两 个 属性 ， 如 例 3-17 所 示 。 


【 例 3-17】 radio 和 checkbox 的 演示 案例 。 


1 <!doctype html> 
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<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 
性 别 : <input type="radio" name="gender"> 男 
10 <input type="radio" name="gender"> 女 
11 爱好 : <input type="checkbox"> 音 乐 
<input type="checkbox"> 体 育 
13 <input type="checkbox"> 有 舞蹈 
14 </form> 
15 </body> 
16 </html> 


运行 结果 如 图 3.21 所 示 。 
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图 3.21 radio、checkbox 展示 效果 


例 3-17 中 ,第 9 行 和 第 10 行 单 选 框 加 了 一 个 name 属性 ,并 且 两 个 单 选 框 中 的 name 
属性 值 相同 ， 目 的 是 让 多 个 单 选 框 之 间 建 立 关系 ， 这 样 就 可 以 对 单 选 框 进行 切换 操作 ， 
因此 在 属性 值 为 单 选 框 时 一 定 要 加 name 属性 ， 否 则 单 选 框 不 能 切换 状态 。 可 以 选择 单 
选 框 和 复 选 框 ， 其 效果 如 图 3.22 所 示 。 
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性 别 : 针 田 1 音乐 固体 育 已 舞蹈 





女 爱 好 : 


3.22 radio、checkbox 展示 效果 


(3) button、submit、reset 

button 值 用 来 设置 普通 按钮 ，submit 值 用 来 设置 提交 按钮 ，reset 值 用 来 设置 重 置 按 
钮 。 接 下 来 通过 案例 来 演示 这 三 个 属性 值 ， 如 例 3-18 所 示 。 

【 例 3-18】 button、submit、reset 三 个 属性 值 的 演示 案例 。 

1 <!doctype html> 


<html> 
3 <head> 
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4 <meta charset="utf-8"> 

5 ”<title>HTML 表单 </title> 

6 </head> 

Th <body> 

8 <form> 

9 <input type="button" value=" 普 通 按 钮 "> 
10 <input type="submit" value=" 提 交 按 钮 "> 
11 <input type="reset"” value=" 重 置 按 钮 "> 
12 </form> 

13 </body> 

14 </html> 


运行 结果 如 图 3.23 所 示 。 








图 3.23 button、submit、reset 展示 效果 


例 3-18 中 ， 第 9 行 、 第 10 行 和 第 11 行 中 的 value 属性 的 作用 是 设置 按钮 上 文本 的 
内 容 。 

普通 按钮 没有 任何 行为 ， 常 用 于 在 用 户 单 击 按钮 时 启动 JavaScript 程序 。 提 交 按 钮 
可 以 看 成 一 种 具有 特殊 功能 的 普通 按钮 ， 单 击 提交 按钮 可 以 实现 将 表单 内 容 提交 给 后 台 
服务 器 处 理 。 重 置 按钮 也 可 以 看 成 一 种 具有 特殊 功能 的 普通 按钮 ， 单 击 重 置 按 钮 可 以 清 
除 用 户 在 页 面 表单 中 输入 的 信息 。 接 下 来 通过 案例 来 演示 这 三 个 按钮 的 展示 效果 ， 如 例 
3-19 所 示 。 

【 例 3-19】 button、submit、reset 三 个 按钮 展示 效果 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 

<body> 

<form action="data.php"> 


OooDpp 


<input type="text"> 
<input type="button" value=" 普 通 按 钮 " onclick="alert('hello')"> 
<input type="submit" value=" 提 交 按 钮 "> 
<input type="reset" value=" 重 置 按钮 "> 
</form> 
</body> 
</html> 
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运行 结果 如 图 3.24 所 示 。 
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图 3.24 button、submit、reset 展示 效果 


单 击 普通 按钮 时 ， 会 弹出 一 个 对 话 框 ， 里 面 的 内 容 为 “hello”。 单 击 提交 按钮 ， 会 
跳 转 到 data.php 页 面 (这 需要 了 解 后 端 技 术 才 可 理解 )。 当 往 输 入 框 中 输入 一 些 内 容 ， 然 
后 再 单 击 重 置 按 钮 ， 发 现 内 容 被 清空 。 

(4) hidden 

hidden 值 用 于 隐藏 那些 只 是 往 后 台 服 务 器 发 送 一 些 数据 ， 但 又 不 影响 页 面 布局 的 表 
单 控件 。 接 下 来 通过 案例 来 演示 hidden 属性 值 ， 如 例 3-20 所 示 。 

【 例 3-20】 hidden 属性 值 的 演示 案例 。 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>HTML 表单 </title> 

</head> 

<body> 

<form action="data.php"> 
<input type="hidden" name="gender" value=" 男 "> 
<input type="submit" value=" 提 交 按 钮 "> 

</form> 

</body> 

</html> 

运行 结果 如 图 3.25 所 示 。 
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图 3.25 hidden 展示 效果 


第 9 行 type 属性 值 设 置 为 hidden, 隐藏 域 在 网 页 中 并 没有 显示 出 来 , 单 击 提交 按钮 ， 
就 可 以 把 value=“ 男 ”提交 给 data.php 这 个 后 台 服 务 器 。 

(5) image 

image 值 用 来 设置 图 像 形式 的 按钮 ,src 属性 用 来 引入 图 像 的 地 址 , 目的 是 蔡 换 submit 
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的 默认 样式 , 从 而 完成 更 加 美观 的 展示 。 接 下 来 通过 案例 来 演示 image 属性 值 , 如 例 3-21 
所 示 。 
【 例 3-21】 image 属性 值 的 演示 案例 。 




















1 <!doctype html> 
这 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title>HTML 表单 </title> 
6 </head> 
A <body> 
8 <form action="data.php"> 
9 <input type="hidden" name="gender" value=" 男 "> 
10 <!--<input type="submit"” value=" 提 交 按 钮 ">--> 
11 <input type="image" src="login.jpg"> 
12 </form> 
13 </body> 
14 </html> 
运行 结果 如 图 3.26 所 示 。 

一 一 一 

图 3.26 image 展示 效果 

(6) file 


file 值 用 来 设置 文件 上 传 的 按钮 ， 文 件 上 传 是 网 站 中 常见 的 功能 ， 例 如 网 盘 文件 上 
传 和 邮箱 文件 上 传 。 设 置 file 值 时 ，<form> 标 签 的 method 属性 必须 设置 成 post，enctype 
属性 必须 设置 成 multipart/form-data。 接 下 来 通过 案例 来 演示 file 值 ， 如 例 3-22 所 示 。 

【 例 3-22】 file 值 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>HTML 表单 </title> 

</head> 

<body> 

<form action="data.php" method="post" 


[> 


enctype="multipart/form-data"> 
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10 <input type="file"> 
11 </form> 
12 </body> 
13 </html> 


运行 结果 如 图 3.27 所 示 。 
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| 选择 交 件 | 未 选择 任何 文件 


图 3.27 file 展示 效果 


网 页 中 经 常 能 看 到 一 些 漂亮 的 上 传 按钮 ， 这 些 按钮 都 是 通过 CSS 来 实现 的 , 后 面 的 
章节 将 会 详细 讲解 。 
2， 其 他 属性 
<input> 标 签 除了 type 属性 ， 还 有 一 些 常用 的 属性 ， 如 表 3.4 所 示 。 
表 3.4 <input> 标 签 其 他 属性 


属性 含义 

name 元 素 的 名 称 

value 元 素 的 值 

maxlength 元 素 允许 输入 的 最 多 字符 数 

disabled 第 一 次 加 载 页 面 时 禁用 该 元 素 (显示 为 灰色 ) 
readonly 元 素 内 容 为 只 读 〈 不 能 修改 编辑 ) 

checked 定义 选择 元 素 默认 被 选中 的 项 





表 3.4 中 列 出 了 <input> 标 签 中 其 他 常用 的 属性 ， 下 面 进行 详细 讲解 。 

(1) name、value 属性 

name 属性 用 来 规定 input 元 素 的 名 称 ，value 属性 用 来 规定 input 元 素 的 值 。 在 前 面 
的 案例 中 ， 已 经 接触 过 name 和 value 这 两 个 属性 ， 其 中 name 值 和 value 值 配合 成 一 对 
来 使 用 ,这 样 后 台 服 务 器 就 可 以 通过 name 值 来 找到 对 应 的 value 值 。 接 下 来 通过 案例 来 
演示 这 两 个 属性 ， 如 例 3-23 所 示 。 

【 例 3-23】 name、value 属性 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
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7 <body> 

8 <form action="data.php"> 

9 姓名 : <input type="text" name="myName" value="myValue"> 
10 性 别 : <input type="radio" name="gender"” value="man"> 男 
1 <input type="radio" name="gender" value="woman"> 女 
12 </form> 

13 </body> 

14 </html> 

运行 结果 如 图 3.28 所 示 。 
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图 3.28 name、value 属性 展示 效果 


(2) maxlength 属性 

maxlength 属性 规定 输入 内 容 允 许 的 最 大 字符 数 ， 如 设置 maxlength 属性 ， 则 输入 
控件 不 会 接受 超过 其 所 允许 字符 数 。 接 下 来 通过 案例 来 演示 maxlength 属性 ， 如 例 3-24 
所 示 。 

【 例 3-24】 maxlength 属性 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 
<input type="text" maxlength="10" minlength="3"> 最 多 输入 10 个 字符 
10 </form> 
11 </body> 
12 </html> 


运行 结果 如 图 3.29 所 示 。 
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最多 输入 10 个 字符 





图 3.29 maxlength 属性 展示 效果 
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(3) disabled、readonly 属性 

disabled 属性 规定 输入 内 容 是 禁用 的 , 被 禁用 的 元 素 是 不 可 用 和 不 可 单 击 的 readonly 
属性 规定 输入 内 容 为 只 读 (不 能 修改 , 但 是 能 获取 当前 只 读 的 内 容 )。 接 下 来 通过 案例 来 
演示 这 两 个 属性 ， 如 例 3-25 所 示 。 

【 例 3-2S】 disabled、readonly 属性 的 演示 案例 。 


王 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title>HTML 表单 </title> 

6 </head> 

<body> 

8 <form> 

9 <input type="text" value="HTML" disabled> 
10 <input type="text" value="HTML" readonly> 
11 <input type="checkbox" disabled> 

12 </form> 

13 </body> 

14 </html> 


运行 结果 如 图 3.30 所 示 。 





| CC 
和 人 HTMI 雪 单 x 时 = lia 
GC © filey//D/HTMLexample/chapterd3/3-25.html 








HTML 


图 3.30 disable、readonly 属性 展示 效果 


(4) checked 属性 

checked 属性 规定 在 页 面 加 载 时 应 该 预先 选 定 的 input 元 素 。checked 属性 与 <input 
type="checkbox"> 或 <input type="radio"> 配 合 使 用 。 接 下 来 通过 案例 来 演示 checkd 属性 ， 
如 例 3-26 所 示 。 

【 例 3-26】 checked 属性 的 演示 案例 。 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 

<body> 


运行 
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<form> 
性 别 : <input type="radio" name=”gender” checked> 男 
<input type="radio" name=”gender”> 女 
爱好 : <input type="checkbox" checked> 音 乐 
<input type="checkbox" checked> 体 育 
<input type="checkbox"> 有 舞蹈 
</form> 
</body> 
</html> 


结果 如 图 3.31 所 示 。 
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图 3.31 checked 属性 展示 效果 


在 后 面 的 章节 中 ， 还 会 学 习 <inpuf> 标 签 新 的 type 属性 值 和 <input> 标 签 其 他 新 的 属 


性 ， 本 节 


3.2.3 


只 对 input 中 常用 的 元 素 进 行 讲解 。 


<textarea> 标 签 


单行 文本 框 只 能 输入 一 行 信息 ， 而 多 行文 本 框 可 以 输入 多 行 信息 。 多 行文 本 框 使 用 
的 是 <textarea> 标 签 ， 而 <inpu 忆 标签 只 能 设置 单行 文本 框 。 接 下 来 通过 案例 来 演示 
<textarea> 标 签 ， 如 例 3-27 所 示 。 

【 例 3-27】 <textarea> 标 签 的 演示 案例 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 
<textarea rows="10" cols="30"> 多 行文 本 框 内 容 </textarea> 
</form> 
</body> 
</html> 


运行 结果 如 图 3.32 所 示 。 
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多 行文 本 框 内 容 





图 3.32 textarea 标签 展示 效果 


例 3-27 中 , rows 属性 可 以 设置 多 行文 本 框 的 行 数 , cols 属性 可 以 设置 多 行文 本 框 的 
列 数 。 这 样 就 可 以 定义 多 行文 本 框 的 尺寸 ， 更 好 的 办 法 是 使 用 CSS 的 height 和 width 
属性 来 定义 多 行文 本 输入 框 的 宽 高 。 


3.2.4 ”<select> 标 签 


网 页 中 经 常会 看 到 包含 多 个 选项 的 下 拉 菜 单 ， 如 选择 城市 、 日 期 、 科 目 、 校 区 选择 
等 。HTML 中 用 <selece> 标 签 设置 下 拉 列 表 ， 其 需要 与 <option> 标 签 配合 使 用 ， 这 个 特点 
和 列表 一 样 ， 如 无 序列 表 是 由 <ul> 标 签 和 <li> 标 签 配合 使 用 。 为 了 更 好 地 理解 ， 可 以 把 
下 拉 列 表 看 作 一 个 特殊 的 无 序列 表 。 

下 拉 列 表 是 一 种 最 节省 页 面 空间 的 选择 方式 ， 因 为 在 正常 状态 下 只 显示 一 个 选项 ， 
单 击 下 拉 菜 单打 开 菜 单 后 才 会 看 到 全 部 的 选项 。 接 下 来 通过 案例 来 演示 <selec 亿 标签 ， 如 
例 3-28 所 示 。 

【 例 3-28】 <selec 必 标签 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>HTML 表单 </title> 

</head> 

<body> 

<form> 

<select> 

<option>HTML</option> 
<option>CSS</option> 


ownamuwm 必 wm 


加 


<option>JavaScript</option> 


FF 
人 


<option>PHP</option> 
</select> 
</form> 
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16 </body> 
17 </html> 


运行 结果 如 图 3.33 所 示 。 
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图 3.33 ”selelct 标签 点 开展 示 效 果 


和 其 他 标签 一 样 ，<selecP 标 签 也 有 其 常用 的 属性 ， 如 表 3.5 所 示 。 
表 3.5 type 属性 取 值 





属 性 含 义 
multiple 多 选 操作 

Size 下 拉 列 表 可 见 选项 的 数目 
Selected 选中 项 


1，mnultiple 属性 


multiple 属性 可 以 设置 多 选 下 拉 列 表 ， 默 认 下 拉 列 表 只 能 选择 一 项 ， 而 设置 multiple 
属性 后 就 可 以 选择 多 项 了 (使 用 “Ctrl+ 鼠 标 左 键 ”进行 多 选 操作 )。 接 下 来 通过 案例 来 


演示 multiple 属性 ， 如 例 3-29 所 示 。 
【 例 3-29】 mnultiple 属性 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 

<select multiple> 
10 <option>HTML</option> 
1 <option>CSS</option> 
下 2 <option>JavaScript</option> 
13 <option>PHP</option> 
14 </select> 
15 </form> 
16 </body> 
17 </html> 


[> 
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运行 结果 如 图 3.34 所 示 。 
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图 3.34 mnultiple 属性 展示 效果 


2， size 属性 


size 属性 可 以 设置 下 拉 列 表 可 见 选项 的 数目 ， 默 认 情 况 下 单 选 下 拉 菜 单 显示 一 项 。 
接 下 来 通过 案例 来 演示 size 属性 ， 如 例 3-30 所 示 。 
【 例 3-30】 size 属性 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 
<select size="2"> 
10 <option>HTML</option> 
11 <option>CSS</option> 


CoroDpre 


12 <option>JavaScript</option> 
13 <option>PHP</option> 

14 </select> 

15 </form> 

16 </body> 

17 </html> 


运行 结果 如 图 3.35 所 示 。 














图 3.35 size 属性 展示 效果 


3。selected 属性 


selected 属性 表示 选中 项 ， 与 单 选 框 的 checked 属性 类 似 ， 注 意 selected 属性 是 设置 
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到 <option> 标 签 上 的 。 接 下 来 通过 案例 来 演示 selected 属性 ， 如 例 3-31 所 示 。 
【 例 3-31】 selected 属性 的 演示 案例 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 
<body> 
<form> 
<select> 
<option>HTML</option> 
<option selected>CSS</option> 
<option>JavaScript</option> 
<option>PHP</option> 
</select> 
</form> 
</body> 
</html> 


结果 如 图 3.36 所 示 。 
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3.36 ”selected 属性 展示 效果 


<selecf> 标 签 中 使 用 <optgroup> 标 签 进行 分 组 项 操作 ， 把 相关 的 选项 组 合 在 一 起 。 
<optgroup> 标 签 的 label 属性 来 设置 分 组 项 的 标题 。 接 下 来 通过 案例 来 演示 <optgroup> 标 
签 ， 如 例 3-32 所 示 。 

【 例 3-32】 <optgroup> 标 签 的 演示 案例 。 


ownauw 必 wmn PP 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>HTML 表单 </title> 
</head> 

<body> 

<form> 
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9 <select> 

10 <optgroup label=" 前 端 技术 "> 
3 <option>HTML</option> 

2 <option selected>CSS</option> 
3 <option>JavaScript</option> 
14 </optgroup>> 

5 <optgroup label=" 后 端 技术 "> 
16 <option>PHP</option> 

7 <option>JAVA</option> 

18 <optgroup></optgroup> 

19 </select> 

20 </form> 

21 </body> 

22 </html> 


运行 结果 如 图 3.37 所 示 。 
rvs x 2 
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3.37 ”optgroup 标签 展示 效果 


3.2.5 ”<label> 标 签 


<label> 标 签 用 来 辅助 表单 元 素 ， 可 以 更 好 地 提高 用 户 体验 。 当 用 户 选择 <label> 标 签 
内 文本 进行 单 击 时 ， 会 自动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 。 接 下 来 通过 案例 来 演 
示 <label> 标 签 ， 如 例 3-33 所 示 。 

【 例 3-33】 <label> 标 签 的 演示 案例 。 


下 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 ”<title>HTML 表单 </title> 
6 </head> 
2 <body> 
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8 <form> 


9 性 别 : <input type="radio" name="gender" id="man"> 
10 <label for="man"> 男 </label> 

nl <input type="radio" name="gender" id="woman"> 
这 <label for="woman"> 女 </label> 

LT3. </form> 

14 </body> 

15 </html> 


运行 结果 如 3.38 所 示 。 





| HTMi 雪 单 x 重 训 晤 
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| 性 别 : 辆 田 马 女 





3.38 label 标签 展示 效果 


当 单 击 <label> 标 签 中 的 文本 〈 男 、 女 )， 也 可 以 对 单 选 框 进行 切换 ， 从 而 使 用 户 体 
验 得 到 提升 。 其 中 <label> 标 签 中 的 for 属性 值 一 定 要 和 <input> 标 签 中 的 id 属性 值 相同 才 
能 找到 对 应 控件 。 


3.3 本 章 小 结 


通过 本 章 的 学 习 ， 能 够 掌握 HTML 表格 和 HTML 表单 的 基本 使 有 用， 了解 前 端 与 后 
台 服 务 器 之 间 如 何 交互 与 通信 。 








3.4 习 题 
1， 填 空 题 
(1) 创建 表格 必 备 的 三 个 标签 为 、 
(2) 为 表格 添加 边框 ， 需 要 设置 的 属性 为 。 
(3) 用 于 创建 表格 的 标题 。 
(4) valign 属性 可 以 设置 单元 格 的 内 容 _ 的 方向 。 
(5) 表单 由 、 5 三 个 部 分 组 成 。 
2， 选 择 题 


(1) 在 HIML 中 ， 下 列 的 哪个 可 以 产生 单 选 框 ?”(  ) 
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A. <input type="radio"> B. <input type="check"> 
C. <input type="checkbox"> D. <radio><radio> 
(2) 下 列 的 HTML 中 哪个 可 以 产生 文本 域 ? (  ) 
A. <textarea></textarea> B. <input type="textarea"> 
C. <text></text> D. <textarea type="text"> 
(3) 以 下 元 素 不 是 table 元 素 子 元 素 的 有 ( 。 )。 
A. <th> B. <tbody> 
C. <thead> D. <td> 
(4) 以 下 标签 不 能 体现 表格 语义 化 的 是 ( 。 ”)。 
A. <tfoot></tfoot> B. <thead></thead> 
C. <table></table> D. <tbody></tbody> 
(5) 以 下 标签 中 作用 与 <form> 标 签 类 似 的 是 (。”)。 
A. <table> B. <th> 
C. <input> D. <label> 
3， 思 考题 


(1) 请 简 述 <label> 标 签 的 作用 。 
(2) 请 简 述 <selec 亿 标签 中 multiple 属性 的 作用 。 
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CSS 入 门 


本 章 学 习 目 标 

。 了 解 CSS 的 历史 ; 

。 掌握 CSS 的 基本 结构 ; 

。 掌握 CSS 的 常用 属性 。 

前 面 的 章节 已 经 讲解 了 使 用 HTML 中 标签 的 属性 对 网 页 进行 修饰 布局 , 但 是 这 种 方 
式 不 太 利于 代码 的 阅读 和 维护 。 使 用 CSS 对 网 页 进行 布局 ， 能 使 网 页 更 美观 、 大 方 ， 实 
现 结构 和 表现 的 分 离 ， 用 CSS 布局 的 网 页 升级 轻松 、 维 护 更 方便 。 本 章 将 带领 大 家 进入 
CSS， 分 别 从 背景 样式 、 边 框 样式 、 文 字样 式 、 段 落 样式 、 复 合 样式 进行 详细 讲解 。 


4.1 CSS 简介 


随 着 HTML 的 发 展 , 为 了 满足 页 面 设 计 者 的 要 求 ， HTML 添加 了 很 多 显示 功能 ,但 
是 随 着 这 些 功 能 的 增加 , 使 得 HTML 变 得 越 来 越 杂 乱 ，HTML 页 面 也 越 来 越 及 肿 ，CSS 
便 诞 生 了 。CSS 是 用 于 简化 HTML 标签 ， 把 关于 样式 部 分 的 内 容 提 取出 来 ， 进 行 单独 地 
控制 ， 使 结构 与 样式 分 离 式 开发 。 

CSS 全 称 为 “Cascading Style Sheet”， 中 文 解释 为 “ 层 又 样式 表 ”， 它 是 以 HTML 为 
基础 ， 设 置 网 页 的 外 观 显示 样式 ， 如 字体 、 颜 色 、 背 景 的 控制 及 整体 的 布局 等 ， 还 可 以 
针对 不 同 的 浏览 器 设置 不 同 的 样式 。 和 学 习 HTML 语言 一 样 ， 首 先 来 了 解 一 下 CSS 的 
历史 。 


4.1.1 CSS 的 历史 版 本 


CSS 这 门 语言 是 由 W3C 组 织 创建 和 维护 的 ， 也 是 W3C 组 织 推荐 的 Web 相关 标准 。 
下 面 列 出 了 CSS 在 不 同时 期 所 对 应 的 一 些 重要 版 本 。 

。 CSS1.0 一 一 1996 年 12 月 ，W3C 推荐 标准 。 

。 CSS2.0 一 一 1998 年 5 月 ，W3C 推荐 标准 。 

。 CSS2.1 一 一 2004 年 6 月 ，W3C 推荐 标准 。 

。 CSS3.0 一 一 还 没有 发 布 正 式 版 本 日 期 到 本 教材 结 稿 时 )。 
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1996 年 末 发 布 了 CSS1.0， 这 个 版 本 只 提供 一 些 简单 的 功能 ， 并 没有 得 到 广泛 的 应 
用 。 直到 CSS2.0 的 诞生 才 真 正 地 把 结构 与 样式 进行 分 离 ， 从 而 得 到 快速 的 发 展 。CSS2.1 
版 本 是 CSS2.0 版 本 的 修正 版 ， 也 是 目前 最 稳定 的 一 个 版 本 。 

随 着 互联 网 的 高 速 发 展 ， 网 页 样式 也 有 更 多 的 需求 ，CSS3 在 CSS2.1 的 基础 上 提供 
了 更 多 实用 且 强 大 的 功能 。 目 前 CSS3 还 没有 发 布 正式 版 本 ， 但 是 它 的 很 多 功能 已 经 可 
以 得 到 很 好 的 支持 与 展示 。 在 后 面 章 节 中 将 会 专门 对 CSS3 进行 详细 讲解 。 


4.1.2 CSS 的 基本 结构 


给 HTML 标签 添加 CSS 样式 总 共有 行 间 样式 、 内 部 样式 和 外 部 样式 三 种 方式 。 

为 了 让 大 家 更 好 地 理解 和 掌握 CSS， 本 章 只 介绍 如 何 通过 行 间 样 式 来 添加 CSS。 内 
部 样式 和 外 部 样式 两 种 引入 方式 会 在 下 一 章 中 进行 讲解 。 

行 间 样式 是 在 HTML 标签 中 添加 style 属性 来 设置 CSS。 其 基本 格式 如 下 : 


语法 ，style=" 属 性 1: 值 1; 属性 2: 值 2; 属性 3: 值 3;" 


CSS 样式 由 属性 和 值 两 部 分 组 成 , 通过 冒号 的 方式 进行 链接 。 多 组 CSS 样式 之 间 用 
分 号 (; ) 进行 分 割 。 一 般 在 分 号 后 面 加 一 个 空格 ， 这 样 可 以 更 容易 阅读 代码 。 接 下 来 通 
过 案例 来 演示 CSS 的 基本 结构 ， 如 例 4-1 所 示 。 

【 例 4-1】 CSS 的 基本 结构 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 简介 </title> 
</head> 
<body> 
<div style="width:100px; height:100px; background-color:red;"></div> 
</body> 
0 </html> 


运行 结果 如 图 4.1 所 示 。 
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4.1 <div> 标 签 设置 CSS 样式 
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例 4-1 中 ， 为 <div> 标 签 设置 width、height、background-color 这 三 个 CSS 属性 。 下 
面 就 讲解 这 三 个 基本 属性 。 


1. 宽 、 高 


CSS 中 通过 width、height 这 两 个 属性 来 设置 HTML 标签 的 尺寸 大 小 ， 即 元 素 的 宽 、 
高 。CSS 中 的 尺寸 单位 有 很 多 ， 比 较 重要 的 两 个 单位 是 像素 单位 和 百分比 单位 ， 后 面 还 
会 介绍 其 他 的 尺寸 单位 。 

(1) 像素 单位 

像素 单位 用 px 表示 ， 全 称 “pixel”( 像 素 )。px 就 是 一 张 图 片 中 最 小 的 点 ， 或 者 是 
计算 机 屏幕 最 小 的 点 。 如 将 新 浪 正 常 图 标 〈 如 图 4.2 所 示 ) 放大 N 倍 后 的 图 标 大 小 如 图 
4.3 所 示 。 





© 
4.2 正常 图 标 大 小 图 4.3 放大 入 倍 图 标 大 小 


观察 图 4.2 和 图 4.3 可 以 发 现 ， 一 张 图 片 是 由 很 多 的 小 方 点 组 成 的 ， 每 一 个 小 方 点 
其 实 就 是 一 个 像素 (px)。 一 台 计 算 机 的 分 辨 率 是 1366pxX768px 指 的 就 是 “计算 机 宽 
是 1366 个 小 方 点 ， 高 是 768 个 小 方 点 ”。 具 体 示 例如 下 。 


I <body> 
2 <div style="width:100px; height:100px;></div> 
3 </body> 


第 2 行为 <div> 标 签 设置 宽 100 像素 , 高 100 像素 。 但 是 当 在 浏览 器 上 进行 预览 效果 
时 , 会 发 现 并 没有 什么 特殊 变化 。 其 原因 是 <div> 标 签 只 是 具备 了 容器 大 小 ， 并 没有 添加 
背景 色 或 边框 样式 。 

(2) 百分比 单位 

百分比 单位 是 一 个 相对 单位 ， 经 常 在 嵌 套 标签 中 使 用 。 假 如 给 子 标签 (也 叫 内 层 标 
签 ) 设置 百分比 单位 ， 那 么 这 个 单位 就 是 相对 于 父 标签 〈 也 叫 外 层 标签 》 的 尺寸 大 小 。 
具体 示例 如 下 。 
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<body> 
<div style="width:200px;"> 
<div style="width:50%;"></div> 
</div> 
</body> 


行为 父 <div> 标 签 的 宽 设 置 了 200px， 第 3 行为 子 <div> 标 签 的 宽 设置 了 50%， 


因此 子 <div> 标 签 的 尺寸 大 小 为 100px。 
2， 背景 色 


在 CSS 中 用 background-color 属性 来 设置 背景 色 。 在 CSS 中 常用 表示 颜色 的 方法 有 
关键 字 颜 色 、 十 六 进 制 颜色 和 RGB 颜色 三 种 。 下 面 将 详细 讲解 这 三 种 表示 颜色 的 方法 。 

(1) 关键 字 颜色 

关键 字 颜 色 指 的 就 是 颜色 的 英文 名 称 ， 如 red、green、blue 等 。 接 下 来 通过 案例 来 
演示 关键 字 颜 色 ， 如 例 4-2 所 示 。 

【 例 4-2】 关键 字 颜 色 的 演示 案例 。 


Coa DNDpe 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 背 景色 </title> 

</head> 

<body> 

<div style="width:200px; height:50px; background-color:red;"></div> 
<div style="width:200px; height:50px; background-color:green;"></div> 
<div style="width:200px; height:50px; background-color:blue;"></div> 
</body> 

</html> 


运行 结果 如 图 4.4 所 示 。 
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4.4 ”关键 字 颜 色 展示 效果 
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(2) 十 六 进 制 颜色 

十 六 进 制 颜色 值 规定 为 坦 RGGBB， 其 中 的 RR (红色 )、GG (绿色 )、BB〔 蓝 色 )， 
十 六 进 制 划分 了 颜色 的 成 分 ， 所 有 值 必须 介 于 0~EFF 之 间 。 例 如 ，#0000ff 值 显示 为 蓝 
色 ， 这 是 因为 蓝 色 成 分 被 设置 为 最 高 值 〈 企 )， 而 其 他 成 分 被 设置 为 0。 当 颜色 值 为 
#AABBCC 这 种 两 两 重复 的 写法 时 ， 也 可 以 简写 成 #ABC 的 方式 。 接 下 来 通过 案例 来 演 
示 用 十 六 进 制 颜色 的 方法 表示 红 、 绿 、 蓝 ， 如 例 4-3 所 示 。 

【 例 4-3】 用 十 六 进 制 颜色 的 方法 表示 红 、 绿 、 蓝 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 背 景色 </title> 

</head> 

<body> 

<div style="width:200px; height:50px; background-color:#ff0000;"></div> 
<div style="width:200px; height:50px; background-color:#00ff00;"></div> 
<div style="width:200px; height:50px; background-color:#0000ff;"></div> 
</body> 

</html> 


结果 如 图 4.5 所 示 。 
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4.5 ”十 六 进 制 颜色 展示 效果 





(3) RGB 颜色 

RGB 颜色 值 规定 为 rgb(red, green, blue)。 每 个 参数 (red、green 和 blue) 定义 颜色 的 
强度 ,可 以 是 介 于 0 一 255 的 整数 。 例如， rgb(0,0,255) 值 显示 为 蓝 色 , 这 是 因为 blue 参 
数 被 设置 为 最 高 值 (255)， 而 其 他 被 设置 为 0。 接 下 来 通过 案例 来 演示 用 RGB 方法 表 
示 红 、 绿 、 蓝 三 种 颜色 ， 如 例 4-4 所 示 。 

【 例 4-4】 用 RGB 方法 表示 红 、 绿 、 蓝 三 种 颜色 的 演示 案例 。 


出 <!doctype html> 
2 <html> 
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3 <head> 

4 <meta charset="utf-8"> 
5 ”<title> 背 景色 </title> 

6 </head> 

7 <body> 

8 <div style="width:200px; 
9 <div style="width:200px; 
10 <div style="width:200px; 
11 </body> 

12 </html> 


运行 结果 如 图 4.6 所 示 。 


口 背景 色 
人 CO file: 


height:50px; background-color:#ff0000;"></div> 
height:50px; background-color:#00ff£00;"></div> 
height:50px; background-color:#0000ff;"></div> 


x 时 


D: /HIMLexample/chapter04/4-4. html 








图 4.6 RGB 颜色 展示 效果 


如 何 提取 一 张 图 片上 的 颜色 值 呢 ? PhotoShop 工具 可 以 轻松 地 帮 大 家 解决 这 个 问 
题 ， 但 这 里 不 做 介绍 ， 有 具体 内 容 在 PhotoShop 章节 中 进行 详细 讲解 。 


4.2 


背景 样式 


CSS 允许 应 用 纯色 作为 背景 ， 也 允许 使 用 背景 图 像 创建 相当 复杂 的 效果 。 设 置 背景 


样式 的 属性 ， 如 表 4.1 所 示 。 


表 4.1 设置 背景 样式 的 属性 














属 性 含义 
backeround-color 设置 背景 色 
backeground-image 设置 背景 图 片 
backeround-repeat 设置 背景 图 片 的 平 铺 方式 
background-position 设置 背景 图 片 的 位 置 
background-attachment 设置 背景 图 随 滚动 条 的 移动 方式 


表 4.1 列 出 了 设置 背景 样式 的 属性 ， 下 面 将 进行 详细 介绍 。 
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1. background-color 


background-color 属性 是 用 来 设置 背景 色 的 , 在 前 面 小 节 中 已 经 学 习 了 如 何 使 用 , 这 
里 不 再 袭 述 。 


2. background-image 


background-image 属性 用 来 设置 背景 图 片 ， 接 下 来 通过 案例 来 演示 ， 如 例 4-5 所 示 。 
【 例 4-5】 用 background-image 属性 设置 背景 图 片 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 背 景 样式 </title> 

</head> 

<body> 

<div style="width:400px; height:200px; 
background-color:yellow; background-image:url (logo.png);"></div> 

</body> 

</html> 


运行 结果 如 图 4.7 所 示 。 
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图 4.7 背景 图 片 展 示 效 果 
图 4.7 中 可 以 看 出 ， 背 景 图 片 在 水 平 垂直 方向 上 都 是 重复 平 铺 的 。 


3，hbackground-repeat 





background-repeat 属 性 用 来 设置 背景 图 片 的 平 铺 方式 ,属性 的 取 值 有 repeat、repeat-x、 
repeat-y 和 no-repeat 四 种 ， 设 置 不 同 的 属性 值 ， 背 景 图 片 的 平 铺 方式 不 一 样 ， 下 面 将 详 
细 介 绍 在 属性 取 不 同 值 时 ， 背 景 图 片 的 平 铺 方式 。 
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(1) repeat 

repeat 值 表示 水 平 垂直 方向 上 都 是 重复 平 铺 的 ， 也 是 默认 值 。 在 例 4-5 中 已 经 提 及 ， 
这 里 不 再 演示 。 

(2) repeat-x 

repeat-x 值 表示 只 是 水 平方 向 重复 平 铺 ， 垂 直方 向 不 重复 平 铺 。 接 下 来 通过 案例 来 
演示 ， 如 例 4-6 所 示 。 

【 例 4-6】 设置 背景 图 片 水 平方 向 重复 平 铺 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 背 景 样式 </title> 

</head> 

<body> 

<div style="width:400px; height:200px; 
background-color:yellow; background-image:url (logo.png); 


OOoDNDpr 


10 background-repeat:repeat-x;"></div> 
11 </body> 
12 </html> 


运行 结果 如 图 4.8 所 示 。 
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拟 已 © File:///D:/HIML exanple/chapter0d/4-6, html 
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图 4.8 背景 图 片 水 平方 向 重复 平 铺展 示 效 果 


(3) repeat-y 

repeat-y 值 表示 只 是 垂直 方向 重复 平 铺 ， 水 平方 向 不 重复 平 铺 。 接 下 来 通过 案例 来 
演示 ， 如 例 4-7 所 示 。 

【 例 4-7】 设置 背景 图 片 垂直 方向 重复 平 铺 ， 水 平方 向 不 重复 平 铺 的 演示 案例 。 


I <!doctype html> 
名 <html> 
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<head> 

4 <meta charset="utf-8"> 

5 ”<title> 背 景 样式 </title> 

6 </head> 

7 <body> 

8 <div style="width:400px; height:200px; 

| background-color:yellow; background-image:url (logo.png); 
10 background-repeat:repeat-y;"></div> 
11 </body> 

12 </html> 

运行 结果 如 图 4.9 所 示 。 
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图 4.9 背景 垂直 方向 重复 平 铺展 示 效 果 





(4) no-repeat 

no-repeat 值 表示 水 平和 垂直 方向 上 都 不 进行 重复 平 铺 。 接 下 来 通过 案例 来 演示 ， 如 
例 4-8 所 示 。 

【 例 4-8】 水 平和 垂直 方向 上 都 不 进行 重复 平 铺 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 背 景 样式 </title> 

</head> 

<body> 

<div style="width:400px; height:200px; 
background-color:yellow; background-image:url (logo.png); 


ownamum 必 wmNn 


卢 
So 


background-repeat:no-repeat;"></div> 
</body> 
</html> 


上 
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运行 结果 如 图 4.10 所 示 。 
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4. background-position 


background-position 属性 用 来 设置 背景 图 片 的 位 置 ， 可 以 选择 两 个 值 ， 其 基本 语法 
格式 如 下 : 


background-position:x 轴 坐标 y 轴 坐 标 ; 


接 下 来 通过 案例 来 演示 background-position 属性 ， 如 例 4-9 所 示 。 
【 例 4-9】 background-position 属性 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 背 景 样式 </title> 

</head> 

<body> 

<div style="width:400px; height:200px; 


Oo wm 


background-color:yellow; background-image:url (logo.png); 
background-repeat :no-repeat; background-position:100px 50px;"></div> 
</body> 
</html> 


运行 结果 如 图 4.11 所 示 。 

图 4.11 中 可 以 看 出 , x 轴 、y 轴 的 默认 坐标 为 《00)， 即 标签 的 左上 角 。 当 x 轴 数 值 
为 正 ， 表 示 水 平 向 右 移 动 相 应 数值 ， 当 x 轴 数 值 为 负 ， 表 示 水 平 向 左 移动 相应 数值 。 当 
y 轴 数 值 为 正 ， 表 示 垂 直 向 下 移动 相应 数值 ， 当 y 轴 数 值 为 负 ， 表 示 垂 直 向 上 移动 相应 
数值 。 
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图 4.11 背景 定位 展示 效果 


background-position 属性 值 除了 可 以 设置 具体 数值 外 ， 还 可 以 设置 成 关键 字 ， 有 具体 
如 下 : 

。 x 轴 关 键 字 left/center/right; 

。 yy 轴 关 键 字 top/center/bottom。 

接 下 来 通过 案例 来 演示 将 背景 图 片 调整 到 右 下 角 位 置 ， 如 例 4-10 所 示 。 

【 例 4-10】 将 背景 图 片 调整 到 右 下 角 位 置 的 演示 案例 。 


1 <!doctype html> 

2 <html> 

2 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 背 景 样式 </title> 

6 </head> 

7 <body> 

8 <div style="width:400px; height:200px; background-color:yellow; 
3 background-image:url (logo.png); background-repeat:no-repeat; 
10 background-position:right bottom;"></div> 

11 </body> 

12 </html> 

运行 结果 如 图 4.12 所 示 。 
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图 4.12 背景 定位 关键 字 展 示 效果 
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当 只 写 left 或 right 时 ,y 轴 默 认为 center。 当 只 写 top 或 bottom 时 ,x 轴 默 认为 center。 


S， background-attachment 


background-attachment 属性 用 来 设置 背景 图 片 随 滚动 条 的 移动 方式 。 
background-attachment 属性 只 有 两 个 属性 值 。scroll 表示 背景 图 像 随 对 象 滚 动 而 滚动 , 是 
默认 选项 ;fixed 表示 背景 图 像 固 定 在 页 面 不 动 ， 只 有 其 他 的 内 容 随 滚动 条 滚动 。 接 下 来 
通过 案例 来 演示 ， 如 例 4-11 所 示 。 

【 例 4-11】 用 background-attachment 属性 设置 背景 图 片 随 滚动 条 的 移动 方式 的 演示 
案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 背 景 样式 </title> 

</head> 

<body> 

<div style="width:400px; height:200px; background-color:yellow; 
background-image:url (logo.png); background-repeat:no-repeat; 

10 background-attachment:fixed;"></div> 

11 </body> 

12 </html> 


运行 结果 如 图 4.13 所 示 。 


OOoDNDre 
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4.13 ”背景 移动 方式 展示 效果 


为 了 让 浏览 器 出 现 滚 动 条 ， 给 <body> 标 签 加 上 了 高 度 。 当 给 background-attachment 
属性 设置 了 fixed 值 时 ， 滚 动 条 滚动 不 会 对 背景 图 进行 滚动 操作 。 这 里 要 注意 一 下 ， 当 
设置 background-attachment 值 为 fixed 时 ，background-position 值 不 再 相对 于 当前 标签 ， 
而 是 <body> 标 签 的 位 置 。 
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4.3 边框 样式 


边框 样式 在 网 页 中 使 用 广泛 ， 它 是 划分 区 域 的 重要 标志 。CSS 中 设置 边框 有 以 下 属 
性 ， 如 表 4.2 所 示 。 


表 4.2 设置 边框 样式 的 属性 











边框 相关 属性 描 述 
border-color 定义 边框 颜色 
border-width 定义 边框 大 小 
border-style 定义 边框 样式 
border-left-* 定义 左边 框 
border-right-* 定义 右边 框 
border-top-* 定义 上 边框 
border-bottom-* 定义 下 边框 





表 4.2 中 列 出 了 设置 边框 样式 的 属性 ， 下 面 将 选 其 中 颜色 、 大 小 、 边 框 样式 三 个 重 
要 属性 进行 详细 讲解 ， 其 他 属性 了 解 即 可 。 


1. border-color 


border-color 属性 用 来 设置 边框 颜色 。 具 体 示例 如 下 所 示 。 


<body> 
<div style="width:400px; height:200px; border-color:red;"></div> 
</body> 


在 浏览 器 中 预览 后 并 没有 看 到 任何 变化 ， 因 此 还 要 设置 其 他 两 个 属性 。 


2. border-width 


border-width 属性 是 用 来 设置 边框 大 小 的 ， 具 体 示例 如 下 所 示 。 


<body> 

<div style="width:400px; height:200px; 
border-color:red; border-width:5px;"></div> 

</body> 

同样 还 是 看 不 到 任何 效果 ， 需 要 再 设置 一 个 属性 。 

3. border-style 


border-style 属性 用 来 设置 边框 样式 ， 常 用 的 边框 样式 有 solid〈 实 线 )、dashed ( 虚 
线 ) 和 dotted (点 线 ) 三 种 样式 。 接 下 来 通过 案例 来 演示 边框 样式 的 设置 ， 如 例 4-12 
所 示 。 
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【 例 4-12】 用 border-style 属性 设置 边框 样式 的 演示 案例 。 


OOoONp 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 边 框 样式 </title> 

</head> 

<body> 

<div style="width:200px; height:50px; border-color:red; 
border-width:5px; border-style:solid;"></div> 

<div style="width:300px; height:50px; border-color:green; 
border-width:5px; border-style:dashed;"></div> 

<div style="width:400px; height:50px; border-color:blue; 
border-width:5px; border-style:dotted;"></div> 

</body> 

</html> 


运行 结果 如 图 4.14 所 示 。 
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4.14 边框 样式 展示 效果 


针对 某 一 个 方向 上 的 边框 设置 ， 可 以 在 边框 属性 之 间 加 一 个 方向 ， 如 border-left-* 
(左边 框 )、boder-right-* (右边 框 )、boder-top-* (上 边框 ) 和 borderbottom-* (下 边框 )。 
接 下 来 通过 案例 来 演示 单独 设置 右边 框 ， 如 例 4-13 所 示 。 

【 例 4-13】 单独 设置 右边 框 的 演示 案例 。 


站 mw 





<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 边 框 样式 </title> 
</head> 

<body> 
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8 <div style="width:400px; height:200px; background-color:yellow; 
9 border-right-color:red; border-right-width:5px; 

10 border-right-style:solid;"></div> 

11 </body> 

12 </html> 


运行 结果 如 图 4.15 所 示 。 


x 时 
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4.15 ”右边 框 展示 效果 


44 文字 样式 


在 制作 HIML 页 面 中 , 最 先 考虑 的 就 是 页 面 的 文字 样式 属性 , 文字 样式 属性 往往 包 
括 字 体 、 大 小 、 粗 细 、 颜 色 等 各 方面 。 下 面 讲 解 CSS 中 与 文字 样式 相关 的 属性 ， 如 表 
4.3 所 示 。 


表 4.3 设置 文字 样式 的 属性 








字体 相关 属性 描 述 
font-family 定义 字体 类 型 
font-size 定义 字体 大 小 
font-weight 定义 字体 粗细 
font-style 定义 字体 样式 
color 定义 字体 颜色 





表 4.3 中 列 出 了 设置 文字 样式 的 属性 ， 下 面 将 对 这 些 属性 进行 详细 讲解 。 
1. font-family 

font-family 属性 用 来 设置 字体 类 型 ， 其 语法 格式 如 下 : 

font-family : 字体 1, 字 体 2, 字 体 3; 
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font-family 可 指定 多 种 字体 ， 多 个 字体 将 按 优 先 顺序 排列 ， 以 逗号 隔 开 。 接 下 来 通 
过 案例 来 演示 ， 如 例 4-14 所 示 。 
【 例 4-14】 用 font-family 设置 字体 类 型 的 演示 案例 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 ”<title> 文 字样 式 </title> 
6 </head> 

汪 <body> 

8 <p style="font-family:tahoma,arial, 'microsoft yahei';"> 
9 这 是 一 段 文 字 </p> 

10 </body> 

11 </html> 

运行 结果 如 图 4.16 所 示 。 








4.16 字体 类 型 展示 效果 


font-family 属性 会 按照 顺序 在 计算 机 系统 内 查找 相应 字体 类 型 ， 如 果 前 一 个 字体 类 
型 没有 找到 ， 就 会 继续 查找 下 一 个 字体 类 型 ， 如 第 8 行 中 tahoma 字体 没 找到 ， 就 会 去 找 
arial 字体 。 以 此 类 推 ， 如 果 所 列 出 的 字体 ， 都 无 法 满足 需要 ， 则 让 操作 系统 自行 决定 使 
用 哪 种 字体 ，Windows 系统 下 默认 为 宋体 。 

常用 字体 类 型 有 ， 英 文字 体 : Arial、tahoma、sans-serif、Times New Roman; 中 文 
字体 : SimSun (宋体 )、FangSong (仿宋 )、Microsoft yahei (微软 雅 黑 )、SimHei (黑体 )、 
KaiTi (楷体 )。 

属性 值 用 中 文 或 英文 都 可 以 ， 如 微软 雅 黑 或 Microsoft yahei 都 可 以 ， 也 可 以 都 写 。 
此 外 ， 中 文字 体 的 中 文 名 称 ， 以 及 由 多 个 单词 组 成 的 英文 名 称 ， 均 需要 放 在 双 引 号 内 。 
接 下 来 通过 案例 来 演示 ， 如 例 4-15 所 示 。 

【 例 4-1S】 设置 字体 类 型 的 演示 案例 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 文 字样 式 </title> 
</head> 


On 必 wb 
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7 <body> 

8 ”<p> 我 是 默认 (默认 为 宋体 ) </p> 

9 <p style="font-family:"microsoft yanhei';"> 我 是 微软 雅 黑 </p> 
10 <p style="font-family:SimSun; "> 我 是 宋体 </p> 

11 <p style="font-family:SimHei;"> 我 是 黑体 </p> 

12 <p style="font-family:KaiTi;"> 我 是 楷体 </p> 

13 </body> 

14 </html> 


运行 结果 如 图 4.17 所 示 。 

下 面 来 了 解 下 衬 线 体 和 无 衬 线 体 。 所谓 衬 线 体 (Serif), 指 的 是 笔画 的 末端 带 有 衬 线 
的 字体 。 就 像 英文 字体 一 样 ， 中 文字 体 也 可 以 分 成 衬 线 体 和 无 衬 线 体 〈San-serif)。 如 
"Microsoft yahei' 〈 微 软 雅 黑 ) 是 无 衬 线 体 ，SimSun 〈 宋 体 ) 是 衬 线 体 。 衬 线 体 和 无 衬 线 
体 如 图 4.18 所 示 。 











才 Serif 
我 是 默认 ( 默认 为 宋体 ) h ’ [| 
我 是 微软 雅 黑 A 
我 是 宋体 i £ 
我 是 黑体 
我 是 楷体 宋体 微软 雅 里 
图 4.17 字体 类 型 展示 效果 4.18 ” 衬 线 体 和 无 衬 线 体 


一 般 来 说 ， 衬 线 体 装 饰 性 强 ， 往 往 用 于 标题 ， 无 衬 线 体 清晰 度 好 ， 往 往 用 于 正文 。 
根据 这 些 规 则 ， 在 文字 样式 设置 中 优先 指定 英文 字体 ， 然 后 再 指定 中 文字 体 ， 这 样 显示 
效果 更 好 。 建 议 多 采用 无 衬 线 体 (San-serif)。 具 体 示例 如 下 : 


font-family:tahoma,arial, "microsoft yahei'; 
当然 这 也 不 是 完全 绝对 的 ， 根 据 项 目的 需求 不 同 ， 可 进行 适当 的 调整 。 
2. font-size 


font-size 属性 用 来 设置 字体 大 小 ，font-size 的 属性 值 可 以 使 用 关键 字 和 像素 作为 字 
体 大 小 的 单位 。 

(1) 关键 字 

采用 关键 字 作 为 字体 大 小 的 单位 ，font-size 取 值 如 表 4.4 所 示 。 


表 4.4 ”关键 字 作 为 单位 ，font-size 属性 取 值 

属性 取 值 字体 大 小 
xx-small 最 小 
x-small 较 小 
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续 表 
属性 取 值 字体 大 小 
small 小 
medium 正常 (默认 值 》 
large 去 
X-large 较 大 
XX-large 最 大 





接 下 来 通过 案例 来 演示 关键 字 作为 字体 大 小 的 单位 ， 如 例 4-16 所 示 。 
【 例 4-16】 关键 字 作为 字体 大 小 的 单位 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 字样 式 </title> 

</head> 

<body> 

<p style="font-size:small;"> 设 置 small 大 小 的 字体 </p> 
<p style="font-size:medium; "> 设置 正常 大 小 的 字体 </p> 
<p style="font-size:large; "> 设置 large 大 小 的 字体 </p> 
</body> 

</html> 


结果 如 图 4.19 所 示 。 


Oo DNDpre 


> 户 p 
DPoO 


1 


问 
Es 
a 








LaJLETIST 3 














设置 small 大 小 的 字体 


设置 正常 大 小 的 字体 
设置 large 大 小 的 字体 





4.19 ”字体 大 小 展示 效果 


在 实际 开发 中 ， 比 较 少 使 用 这 种 方式 来 表达 字体 大 小 ， 一 般 都 是 采用 像素 作为 单位 
的 数值 。 

(2) 像素 

采用 px 作为 字体 大 小 的 单位 ， 默 认 情况 下 浏览 器 字体 大 小 为 16px。font-size 的 取 
值 一 般 对 字体 大 小 都 会 设置 成 偶数 的 数值 ， 如 14px、16px、18px 等 。 接 下 来 通过 案例 来 
演示 用 像素 作为 字体 大 小 的 单位 ， 如 例 4-17 所 示 。 

【 例 4-17】 用 像素 作为 字体 大 小 的 单位 的 演示 案例 。 

1 <!doctype html> 

2 <html> 
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3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 文 字样 式 </title> 

6 </head> 

7 <body> 

8 <p style="font-size:14px"> 设 置 14px 大 小 的 字体 </p> 
9 <p style="font-size:16px; "> 设置 16px 大 小 的 字体 </p> 
10 <p style="font-size:18px; "> 设置 18px 大 小 的 字体 </p> 
11 </body> 

12 </html> 

运行 结果 如 图 4.20 所 示 。 





设置 14px 大 小 的 字体 


设置 16px 大 小 的 字体 
设置 18px 大 小 的 字体 





图 4.20 字体 大 小 展示 效果 


3. font-weight 


font-weight 属性 是 用 来 设置 字体 粗细 的 ， 粗 细 值 可 以 取 关 键 字 和 100 一 900 的 数值 。 
font-weight 属性 取 值 关键 字 如 表 4.5 所 示 。 


表 4.5 font-weight 属性 取 值 关键 字 








关 键 字 字体 粗细 
normal 正常 体 (默认 ) 
lighter 较 细 
bold 较 粗 
bolder 很 粗 





字体 粗细 font-weight 属性 值 还 可 以 取 100、200、…、900 这 九 个 值 。400 相当 于 正 
常 字体 normal，700 相当 于 bold。100 一 900 分 别 表示 字体 的 粗细 ， 是 对 字体 粗细 的 一 种 
量化 方式 ， 值 越 大 就 表示 越 粗 ， 值 越 小 就 表示 越 细 。 接 下 来 通过 案例 来 演示 font-weight 
属性 ， 如 例 4-18 所 示 。 

【 例 4-18】 font-weigh 属性 的 演示 案例 。 
<!doctype html> 
<html> 


<head> 
xmota charset=—"utf 8"> 


心 w N 
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5 ”<title> 文 字样 式 </title> 

6 </head> 

了 <body> 

8 <p style="font-weight:normal; "> 设置 正常 粗细 的 字体 </p> 
9 <p style="font-weight:1lighter; "> 设置 较 细 的 字体 </p> 
10 <p style="font-weight:bold; "> 设置 较 粗 的 字体 </p> 

11 <p style="font-weight:bolder;"> 设 置 很 粗 的 字体 </p> 
12 <p style="font-weight:100;"> 设 置 100 粗细 的 字体 </p> 
13 <p style="font-weight:900;"> 设 置 900 粗细 的 字体 </p> 
14 </body> 

15 </html> 


运行 结果 如 图 4.21 所 示 。 


口 文字 样式 x 全 二 
€ © |© File:///D:/HTMLexanple/chapter04/4-18.html 全 | } 





设置 正常 粗细 的 字体 
设置 较 细 的 字体 
设置 较 粗 的 字体 
设置 很 粗 的 字体 
设置 100 粗 细 的 字体 
设置 900 粗 细 的 字体 











4.21 字体 粗细 展示 效果 


网 页 中 font-weight 属性 一 般 仅 用 到 bold、normal 这 两 个 属性 值 ， 粗 细 值 不 建议 使 用 
数值 (100 一 900)。 


4. font-style 


font-style 属性 是 用 来 设置 字体 样式 的 ， 一 般 可 用 来 设置 文字 的 斜体 效果 。 其 取 值 有 
normal (正常 体 (默认 ))、italic (斜体 ) 和 oblique (斜体 ) 三 种 , 在 没有 斜体 变量 (itallic) 
的 特殊 字体 ， 要 应 用 oblique。 接 下 来 通过 案例 来 演示 font-style 属性 ， 如 例 4-19 所 示 。 

【 例 4-19】 font-style 属性 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 字样 式 </title> 

</head> 

<body> 

<p style="font-style:normal; "> 设置 正常 样式 的 字体 </p> 


oamwmcwN 
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9 <p style="font-style:italic;"> 设 置 italic 斜体 样式 的 字体 </P> 
10 <p style="font-style:oblique;"> 设 置 oblique 斜体 样式 的 字体 </p> 
11 </body> 

12. </html> 


运行 结果 如 图 4.22 所 示 。 








(s) IO file:///D:/HIMLexample/chapter04/4-19. html 妆 | : 


| 设置 正常 样式 的 字体 


旋 寺 ia/c 立 捧 华 zt 的 完 伏 
训 读 oblique 税 傈 样 艺 H9 字 傈 





图 4.22 字体 样式 展示 效果 


图 4.22 中 可 以 看 出 italic 和 oblique 显示 效果 一 样 ， 一 般 情况 下 都 用 italic， 但 italic 
是 字体 的 一 个 属性 ， 但 并 非 所 有 字体 都 有 italic 属性 ， 因 此 如 果 没 有 italic 属性 的 字体 ， 
则 使 用 oblique 将 该 字体 设置 为 斜体 。 也 可 以 这 样 理解 ， 有 些 文字 有 和 斜体 属性 ， 也 有 些 文 
字 没 有 斜体 属性 。italic 是 使 用 文字 的 斜体 ，oblique 是 让 没有 斜体 属性 的 文字 倾斜 。 


S$. color 


color 属性 是 用 来 设置 字体 颜色 的 ,与 背景 色 类 似 ， 其 值 可 以 是 关键 字 颜色 、 十 六 进 
制 颜色 、RGB 颜色 等 。 接 下 来 通过 案例 来 演示 color 属性 ， 如 例 4-20 所 示 。 
【 例 4-20】 color 属性 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 字样 式 </title> 

</head> 

<body> 

<p style="color:red; "> 设置 红色 字体 </p> 

<p style="color:#00ff00; "> 设置 绿色 字体 </p> 
10 <p style="color:rgb(0,0,255);"> 设 置 蓝 色 字体 </p> 
11 </body> 

12 </html> 


运行 结果 如 图 4.23 所 示 。 
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口 文字 样式 





所 © |Q© file: 


设置 红色 字体 


设置 划 色 字体 


x 是 
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4.23 ”字体 颜色 展示 效果 


4.5 段落 样式 


在 上 一 节 学 习 了 文字 样式 ， 本 节 将 学 习 段落 样式 。 文 字样 式 主要 涉及 文字 本 身 的 型 
体 效 果 ， 而 段落 样式 主要 涉及 多 个 文字 的 排版 效果 ， 即 整个 段落 的 排版 效果 。 文 字样 式 
注重 个 体 ， 段 落 样式 注重 整体 。 下 面 来 看 下 段落 样式 有 哪些 相关 属性 ， 设 置 段落 样式 相 


关 属 性 如 表 4.6 所 示 。 


段落 相关 属性 
text-decoration 
text-transform 
text-indent 
text-align 
line-height 
letter-spacing 
Word-spacing 


表 4.6 


设置 段落 样式 相关 属性 


描述 
定义 文本 装饰 
定义 文本 大 小 写 
定义 文本 缩 进 
定义 文本 对 齐 方式 
定义 行 高 
定义 字 间 距 
定义 词 间距 


表 4.6 中 列 出 了 设置 段落 样式 的 相关 属性 , 下 面 将 详细 介绍 这 些 属性 的 取 值 和 效果 。 


1. text-decoration 


text-decoration 属性 用 来 设置 文本 装饰 ， 可 以 给 段落 添加 下 画 线 、 删 除 线 和 顶 画 线 等 
效果 ，ext-decoration 取 值 如 表 4.7 所 示 。 


表 4.7 text-decoration 取 值 




















取 值 效果 
none 无 装饰 线 (默认) 
underline 下 画 线 
line-through 删除 线 
Overline 顶 画 线 
blink 文本 闪烁 
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接 下 来 通过 案例 来 演示 text-decoration 属性 ， 如 例 4-21 所 示 。 
【 例 4-21】 text-decoration 属性 的 演示 案例 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 段 落 样式 </title> 

6 </head> 

辽 <body> 

8 <p style="text-decoration:nonez"> 这 是 一 段 文本 内 容 < /p> 

9 <p style="text-decoration:underline;"> 这 是 一 段 文 本 内 容 </p> 


10 <p style="text-decoration:1line-through; "> 这 是 一 段 文 本 内 容 </p> 
11 <p style="text-decoration:overline;"> 这 是 一 段 文 本 内 容 </p> 

12 <p style="text-decoration:blink; "> 这 是 一 段 文本 内 容 </p> 

13 </body> 

14 </html> 


运行 结果 如 图 4.24 所 示 。 


中 段落 样式 x WE 


€ GC |© sile:///D:/HTMLexanple/chapter04/4-21.html 俯 





这 是 一 段 文本 内 容 





4.24 文本 装饰 展示 效果 


一 般 情况 下 ，text-decoration 属性 常用 none、underline、line-through 这 三 个 值 ， 而 
overline 和 blink 用 得 很 少 ， 而 且 blink 闪烁 效果 目前 浏览 器 都 不 支持 。 

text-decoration 属性 还 可 同时 设置 多 个 值 ， 用 空格 进行 分 割 ， 如 例 4-22 所 示 。 

【 例 4-22】 用 text-decoration 属性 同时 设置 多 个 值 并 用 空格 进行 分 割 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 段 落 样式 </title> 
</head> 

<body> 
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<p style="text-decoration:underline line-through overline"> 
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9 这 是 一 段 文 本 内 容 </p> 
10 </body> 

11 </html> 

运行 结果 如 图 4.25 所 示 。 
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4.25 ”文本 装饰 展示 效果 


2. text-transform 


text-transform 属性 用 来 设置 文本 大 小 写 ， 这 个 是 针对 英文 而 言 ， 因 为 中 文 不 存在 大 
小 写 之 分 ， 其 取 值 如 表 4.8 所 示 。 


表 4.8 text-transform 取 值 表 





取 值 效果 

none 无 转换 发 生 〈 默 认 ) 

Uppercase 转换 成 大 写 

lowercase 转换 成 小 写 

capitalize 将 每 个 英文 单词 的 首 字母 转换 成 大 写 ， 其 余 无 转换 发 生 


接 下 来 通过 案例 来 演示 text-transform 属性 ， 如 例 4-23 所 示 。 
【 例 4-23】 text-transform 属性 的 演示 案例 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 段 落 样 式 </title> 

6 </head> 

了 <body> 

8 <p style="text-transform:none;">This is a text content</p> 

号 <p style="text-transform:uppercase;">This is a text content</p> 


10 <p style="text-transform:lowercase;">This is a text content</p> 
11 <p style="text-transform:capitalize;">This is a text content</p> 
12 </body> 
13 </html> 


运行 结果 如 图 4.26 所 示 。 
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口 生涯 式 x\Y 


本 CC |© file:///D:/HTILexample/chapter04/4-25.html 会 | } 














This is a text content 
THIS IS A TEXT CONTENT 
this is a text content 


This Is A Text Content 





图 4.26 文本 大 小 写 展 示 效 果 


3. text-indent 


text-indent 属性 用 来 设置 文本 缩 进 ， 最 常见 的 用 途 是 将 段落 的 首 行进 行 缩 进 。 接 下 
来 通过 案例 来 演示 text-indent 属性 ， 如 例 4-24 所 示 。 
【 例 4-24】 text-indent 属性 设置 文本 缩 进 的 演示 案例 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 段 落 样 式 </title> 

6 </head> 

h <body> 

8 <p style="width:300px; font-size:14px; text-indent:28px;"> 

9 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 ， 一 直 秉承 “用 良心 做 教育 ”的 理念 ， 
10 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打造 互联 网 技术 型 研发 人 才 服 务 优质 平台 。</p> 
11 </body> 

12 </html> 

运行 结果 如 图 4.27 所 示 。 





口 At x 
© |© file:///D:/HTMLexample/chapter04/4-24.html 丛 | : 





千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 
司 ,一 直 堵 承 “ 用 良心 做 教育 ”的 理念 ， 是 中 国 
开 职 业 教育 领先 品牌 ， 全 力 打造 互联 网 技术 型 研 
发 人 才 服 务 优质 平台 .。 





图 4.27 段落 缩 进展 示 效果 


图 4.27 中 可 以 看 到 当 文 字 大 小 为 14px 时 ,要 缩 进 两 个 文字 , text-indent 值 就 可 设置 
为 28px。 但 是 当 文字 大 小 改变 成 18px 时 ， 要 缩 进 两 个 文字 ，textrindent 值 也 要 发 生 相 应 
的 变化 ( 即 36px)。 这 样 确实 比较 复杂 ， 下 面 来 学 习 一 个 新 的 尺寸 单位 em， 可 使 需求 变 
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em 是 相对 长 度 单位 。 相 对 于 当前 标签 内 文本 的 字体 尺寸 。 假 设 当前 文字 大 小 为 
14px，lem 就 等 于 14px， 如 果 当 前 文字 大 小 改 为 18px，lem 就 等 于 18px， 因 此 段落 首 
行 缩 进 就 可 以 用 2em 来 表示 。 这 样 就 不 用 担心 文字 大 小 变化 。 接 下 来 通过 案例 来 演示 em， 
如 例 4-25 所 示 。 

【 例 4-2S】 em 的 演示 案例 。 


Dowaumn 必 swnNn 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 段 落 样式 </title> 
</head> 
<body> 
<p style="width:300px; font-size:14px; text-indent:2em;"> 
千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 ， 一 直 秉承 “用 良心 做 教育 ”的 理念 ， 
是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打 造 互联 网 技术 型 研发 人 才 服 务 优质 平台 。</p> 
<p style="width:300px; font-size:18px; text-indent:2em;"> 
千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 ， 一 直 秉承 “用 良心 做 教育 ”的 理念 ， 
是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打 造 互联 网 技术 型 研发 人 才 服 务 优质 平台 。</p> 
</body> 
</html> 


运行 结果 如 图 4.28 所 示 。 





es GC | © sile:///D:/HTMLexample/chapter04/4-25. html 女 | : 


千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 
司 , 一直 秉承 “用 良心 做 教育 ”的 理念 ， 是 中 国 
开 职 业 教 育 领先 品牌 ， 全 力 打造 互联 网 技术 型 研 
发 人 才 服 务 优质 平台 . 


干 锋 教 育 未 属于 北京 干 锋 互 联 科 
技 有 限 公司 ， 一 直 秉 承 “ 用 良心 做 教 
育 ”的 理念 ， 是 中 国 IT 职业 教育 领先 
品牌 ， 全 力 打造 互联 网 技术 型 研发 人 
才 服 务 优质 平台 。 





图 4.28 em 单位 展示 效果 


4. text-align 


text-align 属性 用 来 设置 文本 的 水 平方 向 的 对 齐 方式 ， 一 般 情况 下 有 左 对 齐 (left)、 
右 对 齐 (right)、 居 中 对 齐 (center) 和 左右 对 齐 (justify)。 接 下 来 通过 案例 来 演示 text-align 
属性 ， 如 例 4-26 所 示 。 
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【 例 4-26】 text-align 属性 的 演示 案例 。 


二 <!doctype html> 

区 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 段 落 样 式 </title> 

6 </head> 

| <body> 

8 <p style="width:300px; text-align:left;">Qianfeng education belongs to 
9 Beijing Qianfeng Internet Technology Co. Ltd., has been adhering to 
10 the "conscience education" concept.</p> 

11 <p style="width:300px; text-align:center;">Qianfeng education belongs to 
2 Beijing Qianfeng Internet Technology Co. Ltd., has been adhering to 
3 the "conscience education" concept.</p> 


14 <p style="width:300px; text-align:right;">Qianfeng education belongs to 


is Beijing Qianfeng Internet Technology Co. Ltd., has been adhering to 
16 the "conscience education" concept.</p> 

17 <p style="width:300px; text-align:justify;">Qianfeng education belongs to 
18 Beijing Qianfeng Internet Technology Co. Ltd., has been adhering to 
二 9 the "conscience education" concept.</p> 

20 </body> 

21 </html> 

运行 结果 如 图 4.29 所 示 。 


D 和 党 样式 
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Qianfeng education belongs to Beijing 

Qianfeng Internet Technology Co. Ltd. «left 
has been adhering to the “conscience 
education" concept. 


Qianfeng education belongs to Beijing 

Qianfeng Internet Technology Co. Ltd., 

has been adhering to the “conscience 
education" concept. 


4—— Center 


Qianfeng education belongs to Beijing 
Qianfeng Internet Technology Co. Ltd., 
has been adhering to the "conscience 
education" concept. 


< right 


Qianfeng education belongs to Beijing 

Qianfeng Internet Technology Co. Ltd, <— justify 
has been adhering to the "conscience 

education" concept. 





4.29 ”文本 对 齐 展 示 效果 


S. line-height 


line-height 属性 用 来 设置 行 高 ， 所 谓 行 高 就 是 “一 行 的 高 度 ”， 指 的 是 文本 大 小 加 上 


ie 


行 与 行 之 间 的 间距 , 行 高 中 的 上 间距 和 下 间距 是 等 值 关 系 。 行 高 基本 结构 如 图 4.30 所 示 。 


默认 情况 下 段落 是 有 行 高 的 ， 根 据 文字 大 小 的 不 同 ， 默 认 行 高 也 不 相同 。 接 下 来 通 
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4.30 ， 行 高 基本 结构 


过 案例 来 演示 设置 行 高 的 具体 情况 ， 如 例 4-27 所 示 。 
设置 行 高 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 段 落 样 式 </title> 
</head> 
<body> 


【 例 4-27】 


ownamum 必 wm 


-Po 


1 


<p style="width:300px; "> 干 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 ， 
一 直 秉承 “用 良心 做 教育 ”的 理念 </p> 

<hr> 

<p style="width:300px; line-height :0;"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 
限 公司 ， 一 直 秉承 “用 良心 做 教育 ”的 理念 </P> 

<hr> 

<p style="width:300px; line-height:30px;"> 千 锋 教 育 隶 属于 北京 千 锋 互联 科 
技 有 限 公 司 ， 一 直 秉承 “用 良心 做 教育 ”的 理念 </p> 


</body> 
</html> 


运行 结果 如 图 4.31 所 示 。 


0 时 ， 




















Da * > ~ 


€ © | © File: /0D: /HT erasple/chapserddl4-27: 














千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 
司 ， 一 直 羔 承 “ 用 良心 做 教育 ”的 理念 





司 锋 款 训 半 时 于 有 家 和 和 加 P| 次 守护 作 








千 锋 教育 隶属 于 北京 干 锋 互联 科技 有 限 公 
司 ， 一 豆 矢 了 系 “ 用 户 心 做 教育 ”的 理念 


图 4.31 行 高 展示 效果 


行 与 行 之 间 会 重合 在 一 起 ， 当 行 高 值 越 大 时 ， 行 与 行 之 间 的 距离 就 


越 大 。 利 月 


第 





干 锋 故事 snk 





“ 千 锋 UI 设计 培训 一 和 匆 
“ 千 锋 UI 没 计 培 训 ; 涅 笛 重 生 走 自己 的 人 生 


4.32 千 锋 故事 效果 图 
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有 行 高 的 这 个 原理 ， 可 以 解决 一 个 开发 中 常见 的 让 一 行文 字 在 容器 中 上 下 居中 
的 问题 。 千 锋 故事 效果 图 如 图 4.32 所 示 。 


可 以 看 到 “ 千 锋 故事 ”四 个 字 在 容器 中 上 下 居中 。 想 要 实现 这 种 效果 ， 只 需 给 height 


【 例 4-28】 给 height 和 line-height 设置 相同 值 的 演示 案例 。 


业 <!doctype html> 

芝 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 段 落 样式 </title> 

6 </head> 

7 <body> 

8 <div style="border-color:red; border-width:1px; 
9 border-style:solid; width:200px; height:50px; 
10 line-height:50px; "> 千 锋 故事 </div> 

11 </body> 

12 </html> 


运行 结果 如 图 4.33 所 示 。 














[bi 

















图 4.33 文字 上 下 居中 展示 效果 


6. letter-spacing 


和 line-height 设置 相同 值 即 可 ， 接 下 来 通过 案例 来 演示 ， 如 例 4-28 所 示 。 


letter-spacing 属性 用 来 设置 字 间 距 。letter-spacing 控制 的 是 字 间 距 ， 每 一 个 中 文 文字 
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作为 一 个 “ 字 ”, 而 每 一 个 英文 字母 也 作为 一 个 “ 字 ”。 接 下 来 通过 案例 来 演示 letter-spacing 
属性 ， 如 例 4-29 所 示 。 
【 例 4-29】 letter-spacing 属性 的 演示 案例 。 





1 <!doctype html> 
<html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title> 段 落 样 式 </title> 
6 </head> 
Wh <body> 
8 <p style="width:200px;">This is a text content 这 是 一 段 文本 内 容 </p> 
9 <p style="width:200px; letter-spacing:3px;"> 
10 This is a text content 这 是 一 段 文本 内 容 </p> 
11 <p style="width:200px; letter-spacing:10px;"> 
2 This is a text content 这 是 一 段 文 本 内 容 </p> 
13 </body> 
14 </html> 
运行 结果 如 图 4.34 所 示 。 
LajJLE=IGLz 
口 段落 样式 ~ 
A C | © file:///D:/HTMLexample/chaprer04/4-29.hrml 痉 


This is a text content 这 是 


This is a text 
content 这 是 一 段 文 














图 4.34 ” 字 间 距 展 示 效果 


7. word-spacing 


word-spacing 属性 是 用 来 设置 词 间 距 。 以 空格 为 基准 进行 调节 ， 如 果 多 个 单词 被 连 
在 一 起 ， 则 被 word-spacing 视 为 一 个 单词 ， 如 果 汉 字 被 空格 分 隔 ， 则 分 隔 的 多 个 汉字 就 
被 视 为 不 同 的 单词 ，word-spacing 属性 此 时 有 效 。 接 下 来 通过 案例 来 演示 word-spacing 
属性 ， 如 例 4-30 所 示 。 

【 例 4-30】 word-spacing 属性 的 演示 案例 。 

1 <!doctype html> 


2 <html> 
总 <head> 
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4 <meta charset="utf-8"> 

5 ”<title> 段 落 样式 </title> 

6 </head> 

<body> 

8 <p style="width:200px;">This is a text content 这 是 一 段 文本 内 容 </p> 
9 <p style="width:200px; word-spacing:3px;"> 
10 This is a text content 这 是 一 段 文 本 内 容 </p> 
11 <p style="width:200px; word-spacing:10px;"> 
有 This is a text content 这 是 一 段 文本 内 容 </p> 
13 </body> 

14 </html> 


运行 结果 如 图 4.35 所 示 。 


D Rt x\ 
<‘ C | © sile:///D:/HTMLexample/chapter04/4-30. html 





This is a text content 这 是 
一 段 文本 内 容 


This is a text content 这 


旦 一 | 
是 


This is a text content 





图 4.3S 词 间距 展示 效果 


4.6 复合 样式 


4.6.1 复合 写法 特点 


复合 样式 也 叫 复合 写法 ， 是 一 种 用 来 简化 单一 样式 的 写法 。 本 章 中 涉及 的 背景 
(background)、 边 框 (border)、 文 字 (font) 等 属性 都 具备 复合 写法 ， 下 面 就 从 这 三 个 方 
面 进行 详细 讲解 。 

1. background 


background 属性 是 背景 样式 的 复合 写法 。 接 下 来 通过 案例 来 演示 ， 如 例 4-31 所 示 。 
【 例 4-31】 background 属性 的 演示 案例 。 
1 <!doctype html> 


世 <html> 
及 <head> 
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运行 
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<meta charset="utf-8"> 

<title> 段 落 样式 </title> 

</head> 

<body> 

<div style="width:400px; height:100px; background-color:yellow; 
background-image:url (logo.png); background-repeat:no-repeat; 
background-position:right bottom;"></div> 

<hr> 

<div style="width:400px; height:100px; 
background:yellow url (logo.png) no-repeat right bottom; "></div> 

</body> 

</html> 


结果 如 图 4.36 所 示 。 


WD St 


© | © File:///D:/HTML exarple/chapter04/4-31.btal 会 








(全 于 锋 教 育 


www.mobliletrain.org 





(QQ 干 锋 教 育 ” 


Wwww.mobiletrain.org 





4.36 背景 复合 样式 展示 效果 


图 4.36 中 可 以 看 出 以 上 两 段 代 码 展 示 效 果 完 全 相同 , 但 复合 写法 使 用 起 来 更 加 简单 
方便 ， 因 此 推荐 大 家 平时 多 用 复合 样式 去 写 代码 。 背 景 的 多 组 样式 用 空格 隔 开 ， 且 不 分 
先后 顺序 ， 如 背景 图 可 以 在 背景 色 前 出 现 ， 也 可 以 在 背景 色 后 出 现 ， 但 需 注意 背景 定位 
的 两 个 值 不 要 分 开 。 


2，border 


border 属性 是 边框 样式 的 复合 写法 。 接 下 来 通过 案例 来 演示 ， 如 例 4-32 所 示 。 
【 例 4-32】 border 属性 的 演示 案例 。 


Own 必 wmN 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 复 合 样式 </title> 
</head> 

<body> 
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8 <div style="width:400px; height:100px; border-color:red; 

) border-width:5px; border-style:solid"></div> 

10 <hr> 

11 <div style="width:400px; height:100px; border:5px red solid;"></div> 
12 </body> 

13 </html> 


运行 结果 如 图 4.37 所 示 。 


口 复合 样式 


所 加 |© file:///D:/HTMLexample/chapter04/4-32.html 丛 














4.37 边框 复合 样式 展示 效果 


同 背景 一 样 ， 边 框 复合 样式 也 不 区 分 先后 顺序 ， 只 通过 空格 隔 开 即 可 。 单 独 针对 某 
一 方向 的 边框 ， 可 以 采用 复合 样式 ， 例 如 右边 框 复合 样式 : 

border-right : 5px blue dashed; 

3. font 


font 属性 是 字体 样式 的 复合 写法 。 接 下 来 通过 案例 来 演示 ， 如 例 4-33 所 示 。 
【 例 4-33】 font 属性 的 演示 案例 。 


二 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 复 合 样式 </title> 

6 </head> 

法 <body> 

8 <p style="width:400px; font-family:KaiTi; font-size:20px; 

9 font-style:italic; font-weight:bold;"> 

10 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉承 "用 良心 做 教育 "的 理念 ， 
ull 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打造 互联 网 技术 型 研发 人 才 服 务 优质 平台 。</p> 
12 <p style="width:400px; font:italic bold 20px KaiTi"> 

is 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉 承 "用 良心 做 教育 "的 理念 ， 
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14 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打 造 互联 网 技术 型 研发 人 才 服 务 优质 平台 。</p> 
15 </body> 
16 </html> 


运行 结果 如 图 4.38 所 示 。 














于 综 费 育 懈 壤 于 北 贡 于 学 互 恬 入 提 荔 展 分 
辐 ， 一 丘 于 天 “ 用 尽心 做 乾 荫 " 失 理念 ， 是 内 
国 1T 句 业 发 荫 领 先 品 胥 ， 全 力 打 迁 互 吴 网 扒 
大 型 研发 人 才 懂 务 仿 后 严 台 。 


壬 华 乾 育 届 人 于 北 讽 于 尝 互 恬 入 蕉 衣 展 从 

加 ， 一 揣 舌 承 “ 膨 尽心 做 乾 荫 " 失 理念 ， 是 只 
国 1T 句 业 慌 茸 领 先 品 膀 ， 全 力 打 迁 互 性 同 蕉 
大 型 研发 人 才 懂 和 姑 仿 翼 天 台 。 











4.38 ”字体 复合 样式 展示 效果 


字体 的 复合 样式 是 有 顺序 的 ， 必 须 先 写 样式 和 粗细 ， 再 写 大 小 ， 最 后 才能 写 文字 类 
型 。 字 体 的 复合 样式 还 可 以 把 行 高 加 进去 ， 如 行 高 为 40px: 


font : italic bold 20px/40px KaiTi; 
4.6.2 ”复合 写法 注意 事项 


推荐 读者 尽量 采用 复合 样式 书写 CSS。 尽 量 避 免 复合 样式 与 单一 样式 混 写 。 如 果 混 
写 要 注意 先 写 复合 样式 ， 后 写 单一 样式 ， 否 则 可 能 会 出 问题 ， 因 为 后 写 的 样式 会 槛 盖 先 
写 的 样式 。 接 下 来 通过 案例 来 演示 ， 如 例 4-34 所 示 。 

【 例 4-34】 复合 样式 与 单一 样式 混 写 的 演示 案例 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 复 合 样式 </title> 

6 </head> 

7 <body> 

8 <div style="width:400px; height:100px; background-color:yellow; 
9 background:url (logo.png) no-repeat right bottom;"></div> 
10F <hr> 

11 <div style="width:400px; height:100px; background:url (logo.png) 
1 no-repeat right bottom; background-color:yellow;"></div> 
13 </body> 

14 </html> 
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运行 结果 如 图 4.39 所 示 。 
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4.39 复合 样式 与 单一 样式 混 写 展示 效果 


可 以 发 现 第 一 个 <div> 标 签 并 没有 加 上 背景 颜色 , 原因 就 是 它 被 后 写 的 复合 样式 所 覆 
盖 ， 复 合 样式 中 包含 了 对 背景 色 的 设 定 。 


4.7 本 章 小 结 


通过 本 章 的 学 习 ， 对 CSS 有 了 初步 的 了 解 与 掌握 ， 对 一 些 常 用 的 样式 学 会 其 使 用 ， 
对 背景 样式 、 边 框 样式 、 文 字样 式 、 段 落 样式 和 复合 样式 有 初步 的 了 解 。 下 面 的 章节 将 
继续 讲解 CSS 基础 部 分 的 内 容 ， 了 解 更 多 样式 的 使 用 和 CSS 的 操作 技巧 。 





4.8 习 题 

1， 填空 题 

(1) CSS 样式 总 共有 行 间 样 式 、 和 外 部 样式 三 种 方式 。 

(2) CSS 样式 由 和 值 两 部 分 组 成 ， 通 过 冒号 的 方式 进行 链接 。 

(3) CSS 中 的 尺寸 单位 有 很 多 ， 单位 和 单位 是 两 个 比较 
重要 的 单位 。 

(4) 在 CSS 中 常用 表示 颜色 的 方法 有 _ 颜色 、 颜色 和 RGB 
颜色 三 种 。 

(5) 用 于 段落 缩 进 的 相对 长 度 单位 为 

2， 选择 题 


(1) 下 列 选 项 中 ， 不 属于 段落 相关 的 样式 的 是 ( 。”)。 
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A. text-indent B. text-decoration 
C. line-height D. font-size 
(2) font-family 属性 写 多 个 属性 值 时 ， 下 面 说 法 错误 的 是 (。 )。 
A. 属性 值 和 属性 值 之 间 用 空格 隔 开 
B. 中 文字 体 用 双 引 号 “” 括 起 来 
C. 当 一 个 英文 字体 由 多 个 单词 组 成 的 也 用 双 引 号 “” 括 起 来 
D. 属性 值 和 属性 值 之 间 用 “, ” 隔 开 
(3) background-attachment 属性 的 含义 是 ( js 
A. 设置 背景 色 B. 设置 背景 图 片 
C. 设置 背景 图 片 的 位 置 D. 设置 背景 图 随 滚 动 条 的 移动 方式 
(4) 定义 字体 类 型 的 属性 是 % 


A. font-size B. font-family 
C. font-style D. color 
(5) text-indent 属性 的 作用 是 ( % 
A. 定义 文本 大 小 写 B. 定义 字 间 距 
C. 定义 文本 缩 进 D. 定义 词 间距 
3， 思 考题 


(1) 请 简 述 什么 是 复合 样式 。 
(2) 请 简 述 background-position 属性 中 的 值 的 意义 。 





第 5 音 ehapPter 人 
CSS 基础 


本 章 学 习 目 标 

。 了 解 CSS 引入 的 三 种 方式 ; 

。 掌握 CSS 的 选择 符 ; 

。 掌握 CSS 的 优先 级 。 

在 上 一 章节 中 已 经 提 过 , 引入 CSS 的 方式 总 共有 三 种 。 上 一 章 主 要 讲解 了 通过 style 
属性 来 设置 的 行 间 引入 方式 , 本 章 将 从 内 部 引入 和 外 部 引入 两 种 引入 方式 、 选择 符 详解 、 
样式 的 继承 和 样式 的 优先 级 讲解 CSS 基础 内 容 。 


5.1 CSS 引入 方式 


本 节 将 详细 介绍 CSS 内 部 引入 方式 、 外 部 引入 方式 及 三 种 方式 对 比 使 用 。 
5.1.1 内 部 引入 方式 


内 部 引入 方式 是 通过 <style> 标 签 添加 CSS 样式 , 它 与 行 间 样式 引入 方式 的 区 别 是 内 
部 引入 方式 是 通过 <style> 标 签 而 不 是 style 属性 。<style> 标 签 一 般 情况 下 都 会 添加 到 
<head> 标 签 当 中 。 具 体 示例 如 下 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 内 部 引入 方式 </title> 
<style> 
/* 这 里 添加 CSS 的 内 部 样式 */ 
</style> 
9 </head> 
10 <body> 
和 内 容 
12 </body> 
13 </html> 


vawm 必 wm 


Pee 


TML5 从 入 门 到 精通 


CSS 中 通过 /**/ 的 形式 添加 注释 ， 与 HTML 中 添加 注释 的 方式 不 一 样 。/* 作 为 注释 
的 起 始 ，*/ 作 为 注释 的 结束 。 和 HTML 中 添加 注释 一 样 ， 在 Dreamweaver 中 也 可 以 通过 
按钮 选择 添加 CSS 注释 。Dreamweaver 中 添加 注释 如 图 5.1 所 示 。 


doctype nrm> 
eo n> 

cheag> 

cnera charsec="utr-a"> 
加 四 <cicle> 内 部 引入 方式 </cicl=> 
同 <:cvze> 
入 * 这 里 添加 css 的 内 部 样 = 
国清 </scvle> 


Mo </heaad| 





lla dj| 








图 5.1 Dreamweaver 中 添加 注释 


内 部 引入 CSS 样式 ， 要 遵从 一 定 的 CSS 样式 规范 ， 其 语法 格式 如 下 : 
选择 符 { 属性 1: 值 1; 属 性 2: 值 2; } 


选择 符 是 选择 指定 标签 的 方法 ， 通 过 这 种 方法 ， 可 以 选择 到 指定 的 HTML 标签 ， 并 
且 给 其 添加 CSS 样式 。 例 如 页 面 中 有 三 个 <p> 标 签 ， 具 体 示 例如 下 。 


1 <body> 

2 <p> 第 一 个 p 标签 </p> 
3 <p> 第 二 个 p 标 签 </p> 
4 <Pp> 第 三 个 p 标签 </P> 
5 </body> 


如 果 想 让 中 间 的 <p> 标 签 添加 文字 颜色 ， 而 其 他 两 个 <p> 标 签 不 作 任 何 处 理 ， 就 需要 
用 到 选择 符 ， 下 面 先 来 简单 讲解 一 下 id 选择 符 和 class 选择 符 。 


1， id 选择 符 


id 选择 符 是 可 以 给 指定 的 标签 设置 一 个 id 属性 和 一 个 id 值 , 然后 通过 id 选择 符 ( 即 
“# + 这 值 ?) 找到 对 应 的 标签 为 其 设置 id 值 ， 即 添加 CSS 样式 。 接 下 来 通过 案例 来 演示 
id 选择 符 ， 具 体 如 例 5-1 所 示 。 

【 例 5-1】 id 选择 符 的 演示 案例 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf=8"> 


ODPp 
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<title> 内 部 引入 方式 </title> 
<style> 


</style> 
</head> 
10 <body> 
11 <p> 第 一 个 p 标 签 </p> 
12 <p id="elem"> 第 二 个 p 标签 </p> 
13 ”<p> 第 三 个 p 标 签 </p> 
14 </body> 
15 </html> 


运行 结果 如 图 5.2 所 示 。 


6 
了 #elem{ color:red;} 
8 
9 


中 内 部 引入 方式 x 


€ > CG |O file:///D:/HTILexample/chapter05/5-l.html 食 | 让 





第 一 个 p 标 签 
第 二 个 p 标 签 


第 三 个 p 标 签 





图 5.2 id 选择 符 展示 效果 
id 选择 符 的 特点 是 ,在 同一 个 页 面 中 ,不 允许 出 现 两 个 相同 的 id 值 ， 就 像 每 个 人 的 


身份 证 号 都 是 唯一 的 一 样 ，id 选择 符 也 具有 唯一 性 。 


o 


id 选择 符 的 错误 使 用 方式 ， 具 体 示例 如 下 。 


<body> 

<p id="elem"> 第 一 个 p 标 签 </p> 
<p id="elem"> 第 二 个 p 标 签 </p> 
<p id="elem"> 第 三 个 p 标 签 </p> 
</body> 


示例 中 将 三 个 <p> 标 签 的 id 选择 符 都 设置 为 elem 显然 是 CSS 不 允许 的 ， 编 译 会 出 
接 下 来 通过 案例 来 演示 id 选择 符 的 正确 使 用 方式 ， 具 体 如 例 5-2 所 示 。 
【 例 5-2】 id 选择 符 的 正确 使 用 方式 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 内 部 引入 方式 </title> 
<style> 


am 心 wN 


#eleml{ color:red;} 


co wau 必 wmwN PP 


#elem2{ color:green;} 
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#elem3{ color:blue;} 
</style> 
</head> 
<body> 
<p id="eleml"> 第 一 个 pb 标签 </p> 
<p id="elem2"> 第 二 个 p 标签 </P> 
<p id="elem3"> 第 三 个 p 标 签 </p> 
</body> 
</html> 


了 结果 如 图 5.3 所 示 。 


x Ws 


€ © Ke file:///D:/HIMLexample/chapter05/5-2.html 会 | }: 








第 一 个 p 标 签 
第 二 个 p 标 签 
第 三 个 p 标 签 





图 5.3 id 唯一 性 展示 效果 


2， class 选择 符 


class 选择 符 也 叫 “ 类 ”选择 符 ， 可 以 给 指定 的 标签 设置 一 个 class 属性 和 class 值 ， 
然后 通过 class 选择 符 〈 即 “. + class 值 ”) 找到 对 应 的 标签 ， 为 其 设置 class 值 ， 即 添加 
CSS 样式 。 接 下 来 通过 案例 来 演示 class 选择 符 的 使 用 ， 有 具体 如 例 5-3 所 示 。 

【 例 5-3】 class 选择 符 的 演示 案例 。 


四 四 让 um 


FRR PR PP 
wm 心 wN Ph 口 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 内 部 引入 方式 </title> 
<style> 

.elem{ color:red;} 
</style> 
</head> 
<body> 
<p> 第 一 个 p 标签 </p> 
<p class="elem"> 第 二 个 p 标签 </p> 
<p class="elem"> 第 三 个 p 标签 </p> 
</body> 
</html> 
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运行 结果 如 图 5.4 所 示 。 
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第 一 个 p 标 签 
第 二 个 p 标 签 


第 三 个 p 标 签 


图 5.4 elass 选择 符 展 示 效 果 


class 选择 符 的 特点 跟 id 选择 符 不 同 ， 在 同一 个 页 面 中 ，class 值 可 以 重复 出 现 ， 即 
可 以 重复 利用 CSS 样式 。 


5.1.2 外 部 引入 方式 


外 部 样式 的 写法 与 内 部 样式 的 写法 完全 一 样 , 只 是 外 部 引入 方式 是 将 CSS 代码 保存 
在 扩展 名 为 .css 的 样式 表 中 ， 在 HIML 文件 中 引用 扩展 名 为 .css 的 样式 表 。 引 入 的 方式 
用 链接 式 和 导入 式 两 种 方式 。 下 面 将 详细 讲解 这 两 种 外 部 引入 CSS 的 方式 。 


1， 链 接 式 


链接 式 是 将 所 有 的 样式 放 在 一 个 或 多 个 以 “.css” 为 扩展 名 的 外 部 样式 表 中 ， 通 过 
网 页 的 <head></head> 标 签 中 使 用 <link> 标 记 将 外 部 样式 表 文 件 链接 到 HTML 文档 中 。 其 
语法 格式 如 下 : 


<link href="mystyle.css" rel="stylesheet" type="text/css"/> 


语法 中 必须 指定 <link> 标 记 的 三 个 属性 , 其 中 href 是 定义 链接 外 部 样式 表 文件 的 url， 
可 以 是 相对 路 径 和 绝对 路 径 ; rel 是 定义 当前 文档 与 被 链接 文档 之 间 的 关系 ， 这 里 指定 为 
stylesheet， 表 示 被 链接 的 文档 是 样式 表 文 件 ，type 是 定义 链接 文档 的 类 型 ， 这 里 类 型 指 
定 为 textcss， 表 示 链 接 的 外 部 文件 为 CSS 样式 表 。 

这 里 面 涉及 三 个 属性 ，rel="stylesheet" 规定 当前 文档 与 被 链接 文档 之 间 的 关系 。 
type="text/css” 规定 被 链接 文档 的 MIME 类 型 。hre 人 "mystyle.css" 规 定 被 链接 文档 的 位 
置 。 只 需要 记 住 这 个 固定 写法 即 可 。 

接 下 来 通过 案例 分 步骤 演示 如 何 通 过 链接 式 引 入 CSS 样式 表 。 

(1) 首先 打开 DW 软件 ， 创 建 一 个 HTML 文档 ， 并 在 该 文档 中 添加 标题 和 段落 文 
本 。 将 HTML 文档 命名 为 5-4.html， 保 存 。 

(2) 创建 CSS 样式 表 , 在 DW 选择 菜单 栏 中 单 击 【 文 件 】 一 【新 建 】 命 令 , 弹出 “新 
建文 档 ” 对 话 框 ， 如 图 5.5 所 示 。 创建 一 个 CSS 样式 表 ， 弹 出 CSS 文档 编辑 窗口 ， 如 图 
5.6 所 示 。 
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5.5 ”新 建文 档 对 话 框 





5.6 CSS 文档 编辑 窗口 


(3) 书写 CSS 样式 ， 在 图 5.6 中 的 文档 编辑 窗口 中 输入 以 下 代码 。 


p{ font-size:18px; color:red; text-decoration:underline;} 
/* 定 义 文本 修饰 样式 */ 


(4) 保存 CSS 演示 表 文件 ， 选 择 【 文 件 】 一 【保存 】 命令 , 弹出 “另存 为 ”对 话 框 ， 
如 图 5.7 所 示 。 
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图 5.7 保存 CSS 样式 表 


在 图 5.7 中 ， 将 文件 命名 为 style.css， 保 存在 5-4.html 文件 所 在 的 文件 夹 中 。 

(5) 链接 CSS 样式 表 。 在 例 5-4 的 <head> 头 部 标签 中 ， 添 加 <link> 语 句 ， 将 style.css 
外 部 样式 表 文 件 链接 到 5-4.html 文档 中 ， 一 般 <link> 标 签 都 会 写 在 <meta> 标 签 和 <title> 
标签 之 间 。 具 体 如 例 5-4 所 示 。 

【 例 5-4】 链接 CSS 样式 表 的 演示 案例 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


<title> 外 部 引入 方式 </title> 

</head> 

<body> 

<h3 align="center"> 链 接 式 引入 方式 </h3> 
10 ”<p> 通 过 1ink 标签 将 扩展 名 为 .css 的 外 部 样式 表 文件 链接 到 HTML 文档 中 </p> 
11 </body> 
12 </html> 


保存 5-4.html 文档 ， 在 浏览 器 中 运行 ， 运 行 结果 如 图 5.8 所 示 。 


链接 式 引 入 同一 个 CSS 样式 表 可 以 被 不 同 的 HTML 文档 链接 使 用 ， 一 个 HTML 文 
档 也 可 以 通过 多 个 <link> 标 签 链 接 多 个 CSS 样式 表 ， 这 是 其 最 大 的 好 处 。 


主 
2 
= 
4 
5 <link href="style.css" rel="stylesheet" type="text/css"> 
6 
7 
8 
8 
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=== - 
| 外 部 引入 方式 x (a 
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链接 式 引 入 方式 





通过 fink 标 等 将 扩展 名 为 .css 的 外 部 样式 老 文 件 链接 到 HTML 
| 文昌 中 





5.8 ”链接 式 引入 效果 展示 


2， 导 入 式 


导入 式 是 将 一 个 独立 的 .css 文件 导入 HTML 文档 中 , 其 是 在 HTML 文档 <head> 标 签 
中 应 用 <style> 标 签 ， 并 在 <style> 标 签 中 的 开头 处 用 @import 语句 ， 即 可 导入 外 部 样式 表 
文件 。 其 基本 语法 格式 如 下 : 

<style type="text/css"> 


Qimport url (CSS 文件 路 径 ) ;或 aimport "CSS 文件 路 径 " 
/* 此 处 还 可 存放 其 他 CSS 样式 */ 


</style> 


语法 中 ，style 标签 内 还 可 以 存放 其 他 的 内 嵌 样 式 ，@import 语句 需要 位 于 其 他 内 峰 
样式 的 上 面 。 

如 果 对 例 5-3 使 用 导入 式 CSS 演示 ,只 需 将 HIML 文档 中 的 <link> 语 句 蔡 换 成 <style> 
标签 即 可 ， 具 体 示例 如 下 。 


<style type="text/css"> 
Qimport "style.css"; 
</style> 


或 者 


<style type="text/css"> 
Qimport url(style.css); 
</style> 


导入 式 会 在 整个 网 页 加 载 完 后 再 加 载 CSS 文件 , 因此 如 果 网 页 比较 大 则 会 出 现 先 显 
示 无 样式 的 页 面 ， 再 出 现 网 页 的 样式 的 情况 。 这 是 导入 式 固 有 的 一 个 缺陷 。 

虽然 导入 式 和 链接 式 功能 基本 相同 ， 但 大 多 数 网 站 都 是 采用 链接 式 引 入 外 部 样式 
表 ， 这 是 因为 两 者 的 加 载 时 间 和 顺序 不 同 。 加 载 页 面 时 ，<link> 标 签 引用 的 CSS 样式 表 
将 同时 被 加 载 ， 而 @import 引用 的 CSS 样式 表 会 等 整个 网 页 下 载 结束 后 再 被 加 载 。 可 能 
会 显示 无 样式 的 页 面 ， 造 成 不 好 的 用 户 体验 。 因 此 ， 大 多 数 的 网 站 采用 链接 式 的 引入 方式 。 

链接 式 是 使 用 频率 最 高 、 最 实用 的 CSS 样式 表 。 它 可 以 将 HTML 代码 与 CSS 代码 
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分 离 为 两 个 或 多 个 文件 ， 实 现 类 结构 和 表现 的 完全 分 离 ， 使 网 页 的 前 期 制作 和 后 期 维护 
都 变 得 十 分 方便 。 


5.1.3 三 种 方式 的 对 比 


前 面 学 习 了 CSS 的 三 种 引入 方式 ， 在 实际 开发 中 ， 为 了 提升 网 站 的 性 能 和 维护 性 ， 
一 般 都 是 使 用 外 部 引入 方式 ， 下 面 通过 对 比 来 了 解 一 下 。 

比如 要 给 两 个 不 同 的 标签 添加 相同 的 样式 ， 首 先 查 看 使 用 行 间 引入 方式 ， 具 体 示例 
如 下 。 
<body> 

<div style="color:red; "> 我 是 一 个 div 标签 </div> 

<p style="color:red; "> 我 是 一 个 p 标 签 </p> 


2 
3 
4 </body> 


接 下 来 查看 内 部 引入 方式 ， 具 体 示例 如 下 。 


1 <style> 
2 .elem{ color : red; } 
3 </style> 
4 <body> 
| <div class="elem"> 我 是 一 个 div 标签 </div> 
6 <p class="elem"> 我 是 一 个 p 标 签 </p> 
7 </body> 

上 面 示例 代码 可 以 看 出 , 使 用 行 间 引 入 方式 , 直接 对 每 个 标签 应 用 样式 有 它 的 优点 ， 
但 是 这 种 引入 方式 需要 逐个 地 对 元 素 设置 样式 ， 而 且 软 件 更 新 时 需要 逐个 地 对 标签 进行 
样式 调整 ， 可 维护 性 差 ， 使 用 内 部 引入 方式 可 以 通过 选择 器 来 改变 元 素 的 样式 ， 可 以 重 
复 使 用 代码 ， 这 样 做 可 以 提升 性 能 。 如 果 修 改 样式 ， 只 需 修 改 一 次 就 可 以 对 所 有 设置 此 
样式 的 标签 同时 修改 ， 可 维护 性 好 。 

相 比 内 部 样式 ， 外 部 样式 有 更 好 的 提升 性 和 维护 性 ， 这 是 因为 可 以 在 不 同 的 页 面 引 
入 同一 个 CSS 样式 文件 ， 可 以 在 多 个 页 面 之 间 复 用 CSS 样式 。 实 现 结构 和 表现 的 完全 
分 离 ， 使 得 网 页 的 前 期 开发 和 后 期 维护 都 变 得 十 分 方便 。 


5.2 选择 符 详解 


上 一 小 节 中 ， 简 单 地 讲解 了 什么 是 选择 符 及 常用 的 id 选择 符 和 class 选择 符 ， 本 节 
将 详细 讲解 id 选择 符 、class 选择 符 、tag 选择 符 、 通 配 选 择 符 、 分 组 选择 符 、 包 含 选择 
符 和 伪 类 选择 符 等 不 同 选择 符 的 使 用 。 
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id 选择 符 


上 一 节 介绍 了 id 选择 符 的 基本 使 用 ， 下 面 来 了 解 选择 符 的 命名 规范 ,一 般 尽 量 采用 
语义 化 的 英文 单词 ， 不 能 以 数字 或 特殊 字符 开头 。 具 体 示例 如 下 。 


1 
全 
3 
4 
5 


<style> 
#123elem{ color : red; } /* 命 名 错误 */ 
#%@elem{ color : green; } /* 命 名 错误 */ 
#container{ color : blue; } /* 命 名 正确 */ 
</style> 


对 于 复杂 一 些 的 命名 还 可 以 采用 驼峰 命名 方式 或 下 画 线 方式 。 具 体 示例 如 下 。 


下 
最 
3 
4 


5.:2:2 


<style> 
#containerMailTop{ color : red; }  /* 驼 峰 式 命名 */ 
#login gray icon{ color : green; } /* 下 夯 线 命名 */ 
</style> 


class 选择 符 


同样 上 一 节 中 讲解 了 class 选择 符 的 基本 使 用 。 下 面 介 绍 下 class 样式 的 多 组 值 添加 
方式 ， 多 组 值 通过 空格 隔 开 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-5 所 示 。 
【 例 5$-$】 class 样式 的 多 组 值 添加 方式 的 演示 案例 。 


[> 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>class 选择 符 </title> 

<style> 
.boxSize{ width:200px; height:100px; } 
.boxColor{ background:red; } 
-boxBorder{ border:5px black solid; } 

</style> 

</head> 

<body> 

<div class="boxSize boxColor boxBorder"></div> 

</body> 

</html> 


运行 结果 如 图 5.9 所 示 。 
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5.9 ”class 选择 符 多 组 值 展示 效果 


5.2.3 tag 选择 符 


tag 选择 符 也 叫 标 签 选择 符 ， 可 直接 通过 HIML 标签 的 名 字 来 设置 样式 。 接 下 来 通 


过 案例 来 演示 tag 选择 符 的 使 用 ， 具 体 如 例 5-6 所 示 。 
【 例 S-6】 tag 选择 符 的 演示 案例 。 


<!doctype html> 


cam 必 wn 


<html> 
<head> 


<meta charset="utf-8"> 
<title>tag 选择 符 </title> 


<style> 


div{ color:red; } 


pt 


color:green; } 


</style> 


</head> 
<body> 


<div> 第 一 个 标签 </div> 
<div> 第 二 个 标签 </div> 
<p> 第 一 个 段落 </p> 
<p> 第 二 个 段落 </p> 


</body> 
</html> 


运行 结果 如 图 5.10 所 示 。 
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第 一 个 标签 
第 二 个 标签 


第 一 个 段落 
第 二 个 段落 


图 5.10 tag 选择 符 展 示 效 果 
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在 同一 个 HIML 网 页 中 ， 相 同 的 标签 可 能 有 不 同 的 样式 ， 具 体 示例 如 下 。 


LL <style> 

/* 带 有 active 样式 的 div 标签 添加 颜色 */ 

3 </style> 

4 <body> 

5 <div class="active"> 第 一 个 div 标签 </div> 
6 <div> 第 二 个 div 标签 </div> 

2 <p class="active"> 第 一 个 p 标 签 </p> 

8 <p> 第 二 个 p 标 签 </p> 

9 </body> 


上 面 的 示例 代码 中 需要 将 带 有 active 样式 的 <div> 标 签 添加 颜色 ， 但 是 对 同样 带 有 
active 样式 的 <p> 标 签 没有 影响 , 这 时 就 需要 tag 选 择 符 和 class 选择 符 组 合 来 设置 选择 符 ， 
使 网 页 能 够 只 选择 <div> 标 签 中 带 active 的 class 样式 ， 而 不 去 选择 其 他 标签 中 带 active 
的 class 样式 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 5-7 所 示 。 

【 例 $S-7】 tag 选择 符 和 class 选择 符 组 合 设置 选择 符 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>tag 选择 符 </title> 
<style> 

div.active{ color:red; } 
</style> 
</head> 
10 <body> 
11 <xdiv class="active"> 第 一 个 div 标签 </div> 
12 <div> 第 二 个 div 标签 </div> 
13 <p class="active"> 第 一 个 段落 </p> 
14 ” <p> 第 二 个 段落 </p> 
15 </body> 
16 </html> 


运行 结果 如 图 5.11 所 示 。 
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第 一 个 div 标 签 
第 二 个 div 标 签 


第 一 个 段落 
第 二 个 段落 


图 5.11 tag+class 选择 符 展示 效果 
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例 5-7 中 ，tag 选择 符 和 class 选择 符 组 合 使 用 时 ，tag 与 class 之 间 是 紧 挨 着 的 ， 无 
需 空格 隔 开 。 


5.2.4 通 配 选 择 符 


通 配 选 择 符 可 以 把 样式 通用 在 所 有 的 标签 当中 ， 通 过 星 号 〈*) 的 方式 来 设置 ， 要 
慎 用 通 配 选择 符 。 接 下 来 通过 案例 来 演示 通 配 选 择 符 的 使 用 ， 具 体 如 例 5-8 所 示 。 
【 例 5-8】 通 配 选 择 符 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 通 配 选 择 符 </title> 
<style> 

*{ color:red; } 
</style> 
</head> 
10 <body> 
11 <div> 这 是 一 个 div 标签 </div> 
12 ”<p> 这 是 一 个 p 标 签 </p> 
13 ”<h1> 这 是 一 个 hl 标签 </h1> 
14 </body> 
15 </html> 


oOoDp 


避 





”由 通 本 选择 符 x NE 














图 5.12 通 配 选择 符 展示 效果 


5.2.5 组 选择 符 


分 组 选择 符 可 以 简化 相同 样式 的 操作 ， 通 过 喜 号 〈,) 来 进行 分 组 设置 。 接 下 来 通过 
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案例 来 演示 分 组 选择 符 的 使 用 ， 有 具体 如 例 5-9 所 示 。 
【 例 5-9】 分 组 选择 符 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 分 组 选择 符 </title> 
<style> 

div,p,hl{ color:red; } 
</style> 
</head> 
10 <body> 
11 <qdiv> 这 是 一 个 div 标签 </div> 
12 <p> 这 是 一 个 p 标 签 </p> 
13 ”<h1> 这 是 一 个 hl 标签 </h1> 
14 ” <span> 这 是 一 个 span 标签 </span> 
15 </body> 
16 </html> 


行 结果 如 图 5.13 所 示 。 


camwm 必 wm 


ke 
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ae 
及 下 分 组 选择 符 Ca 
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| 这 是 一 个 div 标 签 


这 是 一 个 hi 标签 


这 是 一 个 span 标 签 





图 5.13 分 组 选择 符 展示 效果 


第 7 行将 div、p、hl 标签 统一 设置 颜色 ， 和 把 标签 分 开设 置 颜 色 效果 相同 ,但 是 这 
种 组 合 写法 提供 了 可 维护 性 。 


5.2.6 包含 选择 符 


包含 选择 符 是 指 被 选 标签 被 其 他 标签 所 包含 ， 从 而 通过 筛选 的 方式 进行 操作 ， 通 过 
空格 来 进行 包含 设置 。 例 如 只 需要 dL 中 的 二 添加 文本 颜色 ,而 ol 中 的 二 不 做 任何 处 理 ， 
这 时 就 要 用 到 包含 选择 符 进行 选择 。 接 下 来 通过 案例 来 演示 包含 选择 符 的 使 用 ， 具 体 如 
例 5-10 所 示 。 

【 例 S-10】 包含 选择 符 的 演示 案例 。 


ownaum 必 wm 


H 上 
Le 


上 
ww 


14 


运行 结果 如 图 5.14 所 示 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 包 含 选择 符 </title> 
<style> 
ul li{ color:red; } 
</style> 
</head> 
<body> 
<ul> 
<1i> 千 锋 教育 </1i> 
<1i> 扣 丁 学 堂 </1i> 
<1i> 千 问 千 知 </1i> 
</ul> 
<ol> 
<1i> 千 锋 教育 </1i> 
<1i> 扣 丁 学 堂 </1i> 
<1i> 千 问 千 知 </1i> 
</o1> 
</body> 
</html> 











干 锋 教 育 
扣 本 学堂 


干 问 干 知 


1, 千 锋 教育 
2, 扣 丁 学 党 
3. 千 问 千 知 


图 5.14 包含 选择 符 展示 效果 


5.2.7 伪 类 选择 符 


为 了 提高 用 户 体验 ， 在 定义 超 链接 时 ， 经 常 需要 为 超 链 接 指 定 不 同 的 状态 ， 表 示 超 
链接 在 单 击 前 、 单 击 后 和 鼠标 悬 停 时 的 不 同 的 样式 。 在 CSS 中 ， 通 过 链接 伪 类 选择 符 可 
以 实现 不 同 的 链接 状态 。 伪 类 选择 符 用 于 向 某 些 HTML 标签 添加 特殊 的 效果 。 伪 类 选择 
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符 包含 的 内 容 很 多 ， 在 CSS 基础 部 分 先 学 习 link、hover、active 和 visited 四 个 伪 类 选择 
符 ， 其 中 的 link、visited 这 两 个 伪 类 选择 符 只 能 用 在 <a> 标 签 上 ，hover、active 这 两 个 伪 
类 选择 符 则 可 以 用 在 所 有 的 标签 上 。 伪 类 选择 符 通过 冒号 〈:) 的 方式 来 设置 。 下 面 将 详 
细 介 绍 这 四 个 伪 类 选择 符 。 


1，link 伪 类 


link 伪 类 是 用 来 设置 <a> 标 签 “ 未 访问 ”时 的 样式 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 
例 5-11 所 示 。 
【 例 $-11】 link 伪 类 的 演示 案例 。 


ownamum 必 wm 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 伪 类 选择 符 </title> 
<style> 
.aLink{ color:red; } 
.aLink:link{ color: green; } 
</style> 
</head> 
<body> 
<a href="#"” class="aLink"> 第 一 个 a 链接 </a> 
<a href="#"> 第 二 个 a 链接 </a> 
</body> 
</html> 


运行 结果 如 图 5.15 所 示 。 














5.15 ”link 伪 类 展示 效果 


图 5.15 中 可 以 看 出 ，link 伪 类 可 以 设置 <a> 链 接 “ 未 访问 ”时 的 样式 ， 而 且 能 够 覆 
盖 <a> 标 签 之 前 的 样式 。 同 时 可 以 看 到 <a> 标 签 默认 “未 访问 ”时 的 样式 为 蓝 色 。 


2，hover 伪 类 


hover 伪 类 是 用 来 设置 HIML 标签 “鼠标 划 过 ”时 的 样式 。 接 下 来 通过 案例 来 演示 ， 
具体 如 例 5-12 所 示 。 
【 例 5-12】 hover 伪 类 的 演示 案例 。 
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图 5.16 ”hover 伪 类 展示 效果 


3，active 伪 类 


active 伪 类 是 用 来 设置 HTML 标签 “鼠标 按 下 ”时 的 样式 。 接 下 来 通过 案例 来 演示 ， 
具体 如 例 5-13 所 示 。 
【 例 5S-13】 active 伪 类 的 演示 案例 。 
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运行 结果 如 图 5.17 所 示 。 


€>0C [© si1e://0:/Hm exanple/chapter05/5-13. btnls 全 | file:///D: [© si1e://0:/Hm exanple/chapter05/5-13. btnls 全 | 


5.17 “active 伪 类 展示 效果 





4. visited 伪 类 


visited 伪 类 是 用 来 设置 <a> 标 签 “ 访 问 过 后 ”时 的 样式 。 接 下 来 通过 案例 来 演示 ， 
具体 如 例 5-14 所 示 。 
【 例 S-14】 visited 伪 类 的 演示 案例 。 





第 © 章 ”CSS 基础 139 


11 <body> 

12 <a href="#" class="aLink"> 第 一 个 a 链接 </a> 
13 ”<a href="#"> 第 二 个 a 链接 </a> 

14 </body> 

15 </html> 

运行 结果 如 图 5.18 所 示 。 


样式 的 继承 可 以 理解 为 子 类 的 样式 从 父 标签 或 祖先 标签 中 继承 过 来 。 下 面 通过 案例 


二 二 二 一 一 
WD Ws 下 


所 © | © file: 必 加 :/HTMLexample/chapter0515-14 html# 从 | 上 











第 一 个 a 链接 第 二 个 a 链接 








5.18 ”visited 伪 类 展示 效果 


5.3 样式 的 继承 


来 演示 ， 具 体 如 例 5-15 所 示 。 
【 例 5-15】 样式 的 继承 的 演示 案例 。 


Oo NDp 


FF FF 
心 w PP 口 


> 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 样 式 的 继承 </title> 
<style> 
div{ font-size : 30px; color : red; } 

</style> 
</head> 
<body> 
<div> 

<p> 我 是 一 个 段落 </p> 
</div> 
</body> 
</html> 


运行 结果 如 图 5.19 所 示 。 

5.19 中 可 以 看 出 ，<p> 标 签 显示 的 字体 为 红色 , 但 代码 中 只 是 为 <div> 标 签 设置 了 
演示 ， 并 未 为 <p> 标 签 设置 任何 样式 ， 因 此 <p> 标 签 的 样式 继承 自 它 的 父 标签 <div> 标 签 ， 
但 并 非 所 有 CSS 属性 均 可 继承 。 接 下 来 通过 案例 来 演示 样式 的 继承 ， 具 体 如 例 5-16 所 示 。 
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所 已 |@ ile:) 加 :/HIMLexample/chapter05/5-15. btml 去 | 上 








这 是 一 个 段落 





图 5.19 样式 继承 展示 效果 
【 例 S-16】 样式 的 继承 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 样 式 的 继承 </title> 
<style> 

div{ font-size : 30px; color : red; border : lpx #000 solid; } 
</style> 
</head> 
<body> 
<div> 

<p> 这 是 一 个 段落 </p> 
</div> 
</body> 
</html> 


运行 结果 如 图 5.20 所 示 。 
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这 是 一 个 段落 





图 5.20 样式 继承 展示 效果 


图 5.20 中 可 以 看 出 ， 当 给 <div> 标 签 添加 边框 样式 时 ， 并 没有 被 <p> 标 签 继承 。 这 里 
总 结 下 ， 与 元 素 外 观 ( 文 字 颜 色 、 字 体 等 ) 相关 的 样式 会 被 继承 ， 与 元 素 在 网 页 上 的 布 
局 相关 的 样式 不 会 被 继承 。 在 样式 中 使 用 inherit 这 个 特别 设立 的 值 可 以 强行 继承 ， 明 确 
指示 浏览 器 在 该 属性 上 使 用 父 元 素 样式 中 的 值 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-17 


co var 必 wm 


ke 


运 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 样 式 的 继承 </title> 
<style> 
div{ font-size : 
p{ border : 
</style> 
</head> 
<body> 
<div> 
<p> 这 是 一 个 段落 </p> 
</div> 
</body> 
</html> 


行 结果 如 图 5.21 所 示 。 
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30px; color 


} 


inherit; 
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【 例 5-17】 样式 中 使 用 inherit 值 强行 继承 的 演示 案例 。 


: red; border : lpx #000 solid; } 
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图 5.21 


样式 继承 展示 效果 


第 8 行将 <p> 标 签 中 的 边框 属性 设置 inherit 值 ， 即 手动 继承 <div> 标 签 的 边框 样式 ， 
因此 ， 图 5.21 中 <p> 标 签 中 显示 出 了 边框 。inherit 值 的 即 继承 操作 ， 所 有 标签 都 具备 这 


个 值 。 


5.4 样式 的 优先 级 


在 前 面 的 小 节 中 已 经 学 习 了 很 多 选择 符 , 可 以 给 一 个 HIML 标签 同时 作用 多 个 选择 
符 ， 当 出 现 多 样式 的 时 候 ， 就 会 出 现 它们 的 优先 级 问题 ， 本 节 将 从 相同 样式 优先 级 、 内 
部 样式 和 外 部 样式 、 单 一 样式 优先 级 、! important、 标 签 + 类 与 单 类 、 分 组 优先 级 和 包含 
优先 级 几 种 情况 分 别 讲解 样式 的 优先 级 及 其 使 用 。 
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1， 相 同样 式 优先 级 


当 设 置 相 同样 式 时 ， 后 面 的 优先 级 较 高 ， 但 不 建议 出 现 重复 设置 样式 的 情况 。 接 下 
来 通过 案例 来 演示 ， 具 体 如 例 5-18 所 示 。 
【 例 5-18】 相同 样式 优先 级 的 演示 案例 。 


业 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 样 式 的 优先 级 </title> 

6 <style> 

/ .Content{ color : red; } 

8 .Content{ color : green; } 
9 </style> 

10 </head> 

11 <body> 

12 <p class="content"> 这 是 一 个 段落 </p> 
13 </body> 

14 </html> 


运行 结果 如 图 5.22 所 示 。 


中 样式 的 优先 级 x 全国 
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5.22 ”相同 样式 优先 级 展示 效果 


2， 内 部 样式 与 外 部 样式 


内 部 样式 与 外 部 样式 优先 级 相同 ， 如 果 都 设置 了 相同 样式 ， 那 么 后 写 的 引入 方式 优 
先 级 高 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-19 所 示 。 
【 例 5-19】 内 部 样式 与 外 部 样式 优先 级 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 样 式 的 优先 级 </title> 


<link rel="stylesheet" type="text/css" href="style.css"> 


au wn 


<style> 
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8 /* 优 先 级 高 于 style .css 中 的 content 样式 */ 
9 -Content{ color : green; } 

10 </style> 

11 </head> 

12 <body> 

13 <p class="content"> 这 是 一 个 段落 </p> 

14 </body> 

15 </html> 


运行 结果 如 图 5.23 所 示 。 





中 样式 的 优先 级 x 


各 人 | © File:///D:/HIMLexample/chapter05/5-19.html 售 | : 














这 星 一 个 段落 





5.23 ”内 部 样式 与 外 部 样式 优先 级 展示 效果 


3。 单一 样式 优先 级 
单一 样式 的 优先 级 规则 如 图 5.24 所 示 。 


> id 选 择 符 > 





ta 选择 符 > 默认 继承 





图 5.24 单一 样式 的 优先 级 规则 


接 下 来 通过 分 别 比较 不 同 选择 符 的 优先 级 ， 来 验证 单一 样式 的 优先 级 规则 。 

(1) tag 选择 符 与 默认 继承 优先 级 比较 ，tag 选择 符 的 优先 级 高 于 默认 继承 。 接 下 来 
通过 案例 来 演示 ， 具 体 如 例 5-20 所 示 。 

【 例 5-20】 tag 选择 符 与 默认 继承 优先 级 比较 的 演示 案例 。 


h <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 样 式 的 优先 级 </title> 
6 <style> 

div{ color : red; } 
8 p{ color : green; } 
9 </style> 

10 </head> 

11 <body> 

12 <xp class="content"> 这 是 一 个 段落 </p> 
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13 </body> 
14 </html> 


运行 结果 如 图 5.25 所 示 。 





x 到 








c 名 lio file:///D:/HIMLexample/chapter05/5-20. html 女 | 


这 是 一 个 段落 





5.25 tag 选择 符 大 于 默认 继承 


(2) class 选择 符 与 tag 选择 符 优先 级 比较 ，class 选择 符 的 优先 级 比 tag 选择 符 的 优 
高 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-21 所 示 。 
【 例 S-21】 class 选择 符 与 tag 选择 符 优先 级 比较 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 样 式 的 优先 级 </title> 
<style> 
div{ color : red; } 
p{ color : green; } 


吕 oo~wamwmcwmn 


.active{ color : blue; } 
</style> 
</head> 
<body> 
<p class="active"> 这 是 一 个 段落 </p> 
</body> 
</html> 


运行 结果 如 图 5.26 所 示 。 


FF FRR PP 
入 书 





中 样式 的 优先 级 x 


€ C io file:///D:/HIMLexample/chapter05/5-21.html 会 | } 











这 是 一 个 段落 





5.26 class 选择 符 大 于 tag 选择 符 


(3) id 选择 符 与 class 选择 符 优先 级 比较 。id 选择 符 的 优先 级 比 class 选择 符 优先 级 
接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-22 所 示 。 
【 例 5-22】 id 选择 符 与 class 选择 符 优先 级 比较 的 演示 案例 。 
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运行 结果 如 图 5.27 所 示 。 


癌 样式 的 优先 级 


€ 3 © [Oe//m /mee epeerts/o 00. te A] 1 





5.27 id 选择 符 大 于 class 选择 符 


(4) style 行 间 样式 与 id 选择 符 优先 级 比较 ，style 行 间 样 式 优先 级 比 id 选择 符 优先 
级 高 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-23 所 示 。 
【 例 5-23】 style 行 间 样式 与 id 选择 符 优先 级 比较 的 演示 案例 。 
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15 </body> 
16 </html> 


运行 结果 如 图 5.28 所 示 。 








所 > 已 | @ sile:///D:/HTL exanple/chapter05/5-23. html 广 








这 是 一 个 段落 


图 5.28 style 行 间 样式 大 于 id 选择 符 


4. !important 


!important 表示 “重要 的 ”， 用 来 提升 样式 优先 级 。 当 给 指定 的 样式 添加 !important 
时 ， 表 示 当 前 样式 优先 级 最 高 ， 此 时 可 以 不 用 按照 上 一 小 节 中 的 规则 。( 注 意 !important 
对 默认 继承 不 起 作用 )。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-24 所 示 。 

【 例 5$-24】 ! important 的 演示 案例 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 样 式 的 优先 级 </title> 
<style> 
divt color:red; } 
p{ color:green !important; } 
.active{ color:blue; } 


OOoDpp 


10 #content{ color:yellow; } 

11 </style> 

12 </head> 

13 <body> 

14 <p id="content" class="active" style="color:gray;"> 这 是 一 个 段落 </p> 
15 </body> 

16 </html> 


运行 结果 如 图 5.29 所 示 。 








€ CG | © sile:///D:/HDtLexample/chaprer05/5-24. html 六 | : 








这 是 一 个 段落 


5.29  'important 优先 级 展示 效果 
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第 8 行 给 tag 选择 符 中 的 样式 添加 !important 后 ， 其 优先 级 高 于 style 行 间 样 式 。 这 
种 方式 应 尽量 避免 使 用 ， 除 非 在 极 特殊 情况 下 ， 因 为 这 是 一 种 非 标准 的 写法 。 


S， 标签 + 类 与 单 类 


标签 + 类 的 优先 级 要 大 于 单 类 的 优先 级 ， 接 下 来 通过 案例 来 演示 ， 具 体 如 例 5-25 所 示 。 
【 例 5-25】 标签 + 类 与 单 类 的 优先 级 比较 的 演示 案例 。 











1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title> 样 式 的 优先 级 </title> 
6 <style> 
yi p-.active{ color:red; } 
8 .active { coor:green; } 
9 </style> 
10 </head> 
11 <body> 
12 <p class="active"> 这 是 一 个 段落 </p> 
13 </body> 
14 </html> 
运行 结果 如 图 5.30 所 示 。 
站 样式 的 优先 级 x WN 
| < > C |@ sile:///D:/amexanple/chapter05/5-25.btnl 全 | : 
这 是 一 个 段落 
图 5.30 标签 + 类 大 于 单 类 
6， 分 组 优先 级 


分 组 选择 符 与 单一 选择 符 的 优先 级 相同 ， 靠 后 写 的 优先 级 高 ， 接 下 来 通过 案例 来 演 
示 ， 具 体 如 例 5-26 所 示 。 
【 例 5$-26】 分 组 选择 符 与 单一 选择 符 的 优先 级 比较 的 演示 案例 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 样 式 的 优先 级 </title> 


<style> 


Oo 必 wN PP 
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运行 结果 如 图 5.31 所 示 。 





图 5.31 分 组 优先 级 展示 效果 


7. 包含 优先 级 


包含 选择 符 的 优先 级 相对 比较 复杂 ， 接 下 来 通过 案例 来 演示 包含 优先 级 ， 具 体 如 例 
5-27 所 示 。 
【 例 $-27】 包含 优先 级 的 演示 案例 。 
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17 </1i> 
18 </ul> 

19 </body> 

20 </html> 


运行 结果 如 图 5.32 所 示 。 

















图 5.32 包含 优先 级 展示 效果 


图 5.32 显示 字体 为 红色 , 因此 第 7 行 优先 级 比 第 8 行 优先 级 高 , 可 以 利用 “ 约 分 法 ” 
来 比较 包含 选择 符 的 优先 级 高 低 。“ 约 分 法 ”的 做 法 是 将 相同 类 型 的 选择 符 进行 约 分 处 
理 ， 比 如 id 选择 符 跟 id 选择 符 进行 约 分 ，class 选择 符 与 class 选择 符 进行 约 分 ， 然 后 用 
最 终 约 分 后 的 结果 来 比较 优先 级 高 低 。 上 例 中 的 约 分 结果 如 图 5.33 所 示 。 


\ 
NN # 工 并 st 工 工 -liatqiv -listPp{i color : red;: } 


#1ist ide dx pf color : green; } 
图 5.33 “ 约 分 法 ”处 理 包 含 优先 级 


通过 “ 约 分 法 ”处 理 后 , 第 7 行 的 .listP (class 选择 符 ) 优先 级 高 于 第 8 行 的 p (tag 
选择 符 ) 优先 级 ， 因 此 最 终 文字 颜色 为 红色 。 


5.5 本 章 小 结 


通过 本 章 的 学 习 ， 了 解 CSS 样式 的 三 种 引入 方式 ， 同 时 掌握 CSS 的 选择 符 和 CSS 
的 优先 级 ， 以 及 理解 CSS 的 继承 操作 。 本 章 都 是 CSS 中 的 重要 内 容 ， 希 望 读 者 多 实践 
和 记忆 这 些 重要 内 容 。 在 下 一 章 中 将 学 习 CSS 进 阶 部 分 ， 来 了 解 更 多 CSS 高 级 的 知识 点 。 


5.6 习 题 


1， 填空 题 


(1) CSS 中 添加 注释 的 形式 是 
(2) 通 配 选 择 符 使 用 来 设置 。 


750 


TML5 从 入 门 到 精通 


(3) 在 实际 开发 中 ， 最 常用 的 CSS 引入 方式 是 


(4) class 样式 的 多 组 值 添加 方式 ， 多 组 值 通过 隔 开 。 
C5 是 直接 通过 HTML 标签 的 名 字 来 设置 样式 的 选择 符 。 
2， 选 择 题 
(1) id 选择 符 的 特点 是 ( 。 )。 
A. 唯一 性 B. 普遍 性 
C. 可 以 重复 应 用 D. id 选择 符 可 以 应 用 多 个 
(2) 在 HIML 文档 中 ， 导 入 外 部 样式 表 的 方法 是 (。 )。 
A. <link> B. <url> 
C. src D. @impotant 
(3) 以 下 代码 正确 的 有 5 
A. <p style=font-size:12px;><p> B. <pid="idl i1d2" ></p> 
C. <pclass="classl class2"></p> D. <pid="id",class="classl" ></p> 
(4) 以 下 选择 符 的 优先 级 最 高 的 是 (  )。 
A. tag 选择 符 B. class 选择 符 
C. 默认 选择 符 D. id 选择 符 
(5) 以 下 哪个 伪 类 选择 符 用 来 表示 鼠标 划 过 的 样式 ? (  ) 
A. link B. active 
C. hover D. visited 
3， 思 考题 


(1) 请 简 述 常见 的 CSS 选择 器 有 哪些 。 
(2) 请 简 述 CSS 优先 级 是 如 何 规定 的 。 








本 章 学 习 目标 

。 理解 CSS 盒子 模型 与 组 成 ; 

。 掌握 块 与 内 联 的 特点 与 区 别 ; 

。 掌握 默认 样式 和 重 置 样式 方式 。 

在 上 一 章 已 经 讲解 了 CSS 基础 部 分 ， 本 章 将 更 深入 地 讲解 CSS 进 阶 内 容 ， 从 用 于 
控制 网 页 中 各 个 元 素 呈 现 效 果 的 盒子 模型 、 块 与 内 联 、 默 认 样 式 、 其 他 常用 样式 等 进行 
讲解 。 


6.1 CSS 盒子 模型 


CSS 盒子 模型 是 HTML+CSS 中 最 核心 的 内 容 ， 理 解 这 个 重要 的 概念 和 掌握 其 各 种 
规律 和 特征 ， 才 可 以 更 好 地 控制 网 页 中 各 个 元 素 所 呈现 的 效果 ， 从 而 进行 网 页 布局 。 


6.1.1 初 识 盒子 模型 


当 浏 览 网 页 时 , 可 以 发 现 网 页 是 由 很 多 个 矩形 组 成 的 这些 和 矩形 就 是 CSS 盒子 模型 ， 
它 是 搭建 布局 的 重要 组 成 。CSS 盒子 模型 又 称 框 模型 (Box Model)， 它 是 由 内 容 
(content)、 内 边 距 (padding)、 边 框 (border)、 外 边 距 (margin) 等 几 个 重要 的 CSS 元 
素 组 成 。 

为 了 更 好 地 理解 盒子 模型 ， 用 生活 中 常见 的 快递 盒子 来 理解 盒子 模型 和 元 素 分 工 ， 
快递 中 的 物品 为 CSS 盒子 模型 的 内 容 (content〉 部分， 快递 的 包装 纸箱 为 CSS 盒子 模 
型 的 边框 (border) 部 分 ， 为 了 防止 物品 损坏 ， 物 品 和 包装 箱 之 间 可 能 有 一 些 泡沫 填充 
物 ， 这 些 泡沫 填充 物 为 CSS 盒子 模型 的 内 边 距 (padding) 部 分 ， 多 个 快递 之 间 的 距离 为 
CSS 盒子 模型 的 外 边 距 (margin) 部 分 。 

下 面 用 图 来 描述 CSS 盒子 模型 的 元 素 组 成 ， 如 图 6.1 所 示 。 

接 下 来 详细 地 对 CSS 盒子 模型 的 每 一 部 分 进行 讲解 。 
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border-bottom 


margin-bottom 














width 


图 6.1 CSS 标准 盒子 模型 


6.1.2 ”content 内 容 


content 内 容 部 分 由 CSS 宽 、 高 两 个 属性 决定 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 
6-1 所 示 。 
【 例 6-1】 content 内 容 。 


业 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title>Css 盒子 模型 </title> 

6 <style> 

学 #box{ width:200px; height:100px; background:blue; color:white; } 
8 </style> 

9 </head> 

10 <body> 

11 <div id="box"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
12 </body> 

13 </html> 


运行 结果 如 图 6.2 所 示 。 




















[LaJ[=sIE[ 3 
y 合子 模型 x 下 
< © | © file:///D:/HTMLexample/chapter06/6-1.htal ”六 


做 真实 的 自己 ， 用 良心 做 教 











图 6.2 content 内 容 展 示 效 果 


图 6.2 中 ， 可 以 看 到 蓝 色 部 分 为 content 区 域 。 


6.13 


padding 内 边 距 


内 边 距 部 分 由 padding 样式 来 设置 .padding 样式 可 以 分 成 padding-left\,padding-right、 
padding-top、padding-bottom 和 padding 五 个 属性 。 接 下 来 通过 案例 来 演示 四 个 方向 设置 
内 边 距 的 写法 ， 有 具体 如 例 6-2 所 示 。 

【 例 6-2】 padding 内 边 距 。 


Oo Dpe 


15 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 盒子 模型 < 人 title> 

<style> 

#box{ width:200px; height:100px; background:blue; color:white; 

padding-top : 20px; padding-right : 30px; 
padding-bottom : 40px; padding-left : 50px; } 

</style> 

</head> 

<body> 

<div id="box"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 

</body> 

</html> 


运行 结果 如 图 6.3 所 示 。 





[aj[siel % 














/中 css 六 了 模型 ~ 


€ GG | © file:///D:/HIMLexample/chapter06/6-2. html 六 | : 








做 真实 的 自己 ， 用 良心 做 教 
jj 




















图 6.3 padding 内 边 距 展示 效果 


padding 值 可 以 通过 复合 写法 设置 成 四 个 值 或 两 个 值 或 一 个 值 ， 其 基本 格式 如 下 


所 示 。 
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padding: 上 边 距 右边 距 下 边 距 左边 距 ; 
padding: 上 下 边 距 左右 边 距 ; 
padding: 上 下 左右 边 距 ; 


接 下 来 通过 案例 来 演示 padding 值 的 复合 写法 ， 具 体 如 例 6-3 所 示 。 
【 例 6-3】 padding 值 的 复合 写法 。 


1 <!doctype html> 

多 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title>CSS 盒子 模型 </title> 

6 <style> 

h #box{ width:200px; height:100px; background:blue; color:white; 
8 padding:20px 30px 40px 50px; } 

9 </style> 

10 </head> 

11 <body> 

12 <div id="box"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
13 </body> 

14 </html> 


运行 结果 如 图 6.4 所 示 。 



























[Ee 
口 Css 盒子 模型 x 过 
所 GCG |© file:///D:/HIMLexample/chapter06/6-5. html 女 | : 


做 真实 的 自己 ， 用 良心 做 教 
育 ! 


育 ! 














图 6.4 padding 复合 写法 展示 效果 


背景 部 分 是 可 以 同时 作用 在 content 内 容 和 padding 内 边 距 上 的 。 


6.1.4 ”border 边框 











在 前 面 的 章节 中 已 经 学 习 过 border 的 基本 使 用 ， 这 里 不 青 袭 述 。 下 面 将 介绍 border 
在 盒子 模型 中 的 使 用 。 当 不 设置 padding 时 ， 边 框 紧 挨 着 content 内 容 。 接 下 来 通过 案例 

















来 演示 ， 具 体 如 例 6-4 所 示 。 
【 例 6-4】 不 设置 padding 时 ， 边 框 紧 挨 着 content 内 容 。 


下 <!doctype html> 

2 <html> 

2 <head> 

4 <meta charset="utf-8"> 

5 ”<title>CSS 盒子 模型 </title> 

6 <style> 

yl #box{ width:200px; height:100px; background:blue; color : white; 
8 border:10px black solid; } 

9 </style> 

10 </head> 

11 <body> 

12 <div id="box"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
13 </body> 

14 </html> 


运行 结果 如 图 6.5 所 示 。 

















口 ss 盒子 模型 x 





一 GC |Q file: D:/HIMLexample/chapter06/6-4. html 人 | 


做 真实 的 自己 ， 用 和 良心 做 教 
育 ! 


三 种 




















6.5 ”border 边框 展示 效果 


当 设 置 padding 时 ,边框 紧 挨 着 padding 内 边 距 。 接 下 来 通过 案例 来 演示 ， 具体 如 例 
6-5 所 示 。 
【 例 6-5】 设置 padding 时 ， 边 框 紧 挨 着 padding 内 边 距 。 


<!doctype html> 
<html> 
<head> 
<meta charset=—"Uutf 8°> 
<title>CSS 盒子 模型 </title> 
<style> 
#box{ width: 200px; height : 100px; background : blue; color : white; 


JamproDNDp 
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border : 10px black solid; 
padding : 20px 30px 40px 50px; } 
10 </style> 


11 </head> 
12 <body> 
13 ”<div id="box"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
14 </body> 
15 </html> 


运行 结果 如 图 6.6 所 示 。 








做 真实 的 自己 ， 用 良心 做 教 


EF 
二 一 | 














图 6.6 border 边框 展示 效果 


6.1.5 _ margin 外边 距 


外 边 距 指 的 是 盒子 与 盒子 之 间 的 距离 ,用 margin 样式 来 定义 ,同样 margin 和 padding 
类 似 ， 也 分 为 margin-lefft、margin-right、margin-top、margin-bottom、marsgin 五 个 属性 。 
接 下 来 通过 案例 演示 分 别 为 四 个 方向 设置 外 边 距 值 , 为 了 更 好 地 展示 效果 , 给 body 加 上 
-像素 虚线 框 ， 具 体 如 例 6-6 所 示 。 
【 例 6-6】 分 别 为 四 个 方向 设置 外 边 距 值 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 盒子 模型 </title> 
<style> 
body{ border : lpx black dashed; } 
#box{ width:200px; height:100px; background:blue; color:white; 
border:10px black solid; 


吕 oamuwm 必 mwN PP 


四 
志 


Css 进 阶 157 


10 padding:20px 30px 40px 50px; 

11 margin-top:20px; margin-right:30px; 

12 margin-bottom:40px; margin-left:50px; } 
13 </style> 

14 </head> 

15 <body> 

16 ”<div iq="box"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 

17 </body> 

18 </html> 


运行 结果 如 图 6.7 所 示 。 








LaJLEIGT ¥ 
ei \™ 
I 四 css 盒 子 模型 X 三 
和 GC |© file:///D:/HIMLexample/chapter06/6-6.ht 广 





做 真实 的 自己 ， 用 良心 做 教 
育 ! 














6.7 ”margin 外 边 距 展示 效果 


margin 值 也 可 以 通过 复合 写法 设置 成 四 个 值 、 两 个 值 或 一 个 值 ， 其 基本 格式 如 下 
所 示 。 

margin: 上 边 距 右边 距 下 边 距 左边 距 ; 

margin: 上 下 边 距 左右 边 距 ; 

margin: 上 下 左右 边 距 ; 

接 下 来 通过 案例 来 演示 margin 复合 写法 ， 具 体 如 例 6-7 所 示 。 

【 例 6-7】 margin 复合 写法 。 





<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 盒子 模型 </title> 
<style> 
body{ border : lpx black dashed; } 
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#box{ width:200px; height:100px; background:blue; color:white; 
border : 10px black solid; 
padding : 20px 30px 40px 50px; 
margin : 20px 30px 40px 50px; } 
</style> 
</head> 
<body> 
<div id="box"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
</body> 
</html> 


运行 结果 如 图 6.8 所 示 。 
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做 真实 的 自己 ， 用 良心 做 教 
育 ! 


下 























图 6.8 ”margin 复合 写法 展示 效果 


图 6.8 中 可 以 看 出 ， 背 景 部 分 不 会 作用 到 margin 外 边 距 上 。 


6.1.6 _ margin 翅 加 和 传递 


在 margin 操作 过 程 中 ， 经 常会 遇 到 margin 全 加 和 margin 传递 问题 ， 下 面 将 详细 介 
绍 这 两 种 情况 。 


1. margin 侄 加 


当 给 两 个 盒子 同时 添加 上 下 外 边 距 时 ， 就 会 出 现 县 加 的 问题 ， 接 下 来 通过 案例 来 演 
具体 如 例 6-8 所 示 。 
【 例 6-8】 margin 登 加 。 


攻 


<!doctype html> 
<html> 


<head> 
<meta charset="utf-8"> 
<title>CSS 盒子 模型 </title> 


#boxl{ width:200px; height:100px; background:blue; color:white; 


3 

4 

5 

6 <style> 
7 

8 margin-bottom:20px; } 
9 


#box2{ width:200px; height:100px; background:blue; color:white; 


10 margin-top:30px; } 

11 </style> 

12 </head> 

13 <body> 

14 <div ig="box1"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
15 <div id="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
16 </body> 

17 </html> 


运行 结果 如 图 6.9 所 示 。 











数 真 实 的 自己 ， 用 良心 做 教 
! 


做 真实 的 自己 ， 用 良心 做 教 
育 ! 


但 








图 6.9 _ margin 倒 加 展示 效果 
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例 6-8 中 , 第 一 个 <div> 标 签 设置 了 margin-bottom 值 为 20px， 第 二 个 <div> 标 签 设置 
了 margin-top 值 为 30px, 理论 上 可 能 会 认为 它们 之 间 的 距离 为 50px, 但 实际 上 它们 之 间 


的 距离 为 30px。 这 是 因为 margin 上 下 值 同时 存在 时 ， 不 是 把 上 下 人 f 
把 上 下 值 中 较 大 的 一 个 值 作为 它们 之 间 的 距离 ， 因 此 为 30px。 


直 累加 到 一 起 ， 而 是 


上 下 margin 会 存在 上 下 合 加 问题 ， 而 左右 margin 不 存在 县 加 问题 。 让 盒子 左右 排 








列 ， 会 涉及 float 属性 ， 这 里 不 做 过 多 介绍 ， 只 演示 效果 ， 下 一 章节 
属性 。 接 下 来 通过 案例 来 演示 盒子 左右 排列 ， 具 体 如 例 6-9 所 示 。 
【 例 6-9】 盒子 左右 排列 。 


下 <!doctype html> 
2 <html> 


会 详细 地 介绍 float 
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<head> 
<meta charset="utf-8"> 
<title>CSS 盒子 模型 </title> 
<style> 
#box1{ width:200px; height:100px; background:blue; color:white; 
margin-right:20px; float:left; } 
#box2{ width:200px; height:100px; background:blue; color:white; 
margin-left:30px; float:left; } 
</style> 
</head> 
<body> 
<div id="box1"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
<div id="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
</body> 
</html> 


运行 结果 如 图 6.10 所 示 。 
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[= [= =U 做 真实 的 自己 ， 用 良心 做 教 
育 ! 育 ! 


育 











图 6.10 ”margin 左右 展示 效果 


图 6.10 中 可 以 发 现 左右 margin 不 会 存在 合 加 问题 ， 因 此 这 个 问题 只 是 针对 上 下 
margin 而 言 的。 一 般 情况 下 应 避免 同时 设置 上 下 margin， 如 上 下 的 距离 为 SOpx， 可 以 将 
第 一 个 <div> 标 签 设 置 margin-bottom 值 为 SOpx， 或 将 第 二 个 <div> 标 签 设 置 margin-top 


值 为 50px。 接 下 来 通过 案例 来 





寅 示 ， 具 体 如 例 6-10 所 示 。 


【 例 6-10】 避免 同时 设置 上 下 margin。 


Oo Dp 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 盒子 模型 </title> 

<style> 
#boxl{ width:200px; height:100px; background:blue; color:white; } 
#box2{ width:200px; height:100px; background:blue; color:white; 

margin-top:50px; } 
</style> 


四 
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11 </head> 
12 <body> 
13 <div id="box1"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
14 <div id="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
15 </body> 
16 </html> 


运行 结果 如 图 6.11 所 示 。 
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做 真实 的 自己 ， 用 良心 做 教 
育 ! 


做 真实 的 自己 ， 用 良心 做 教 
育 ! 











6.11 margin 上 下 展示 效果 


2. margin 传递 


margin 传递 的 问题 只 会 出 现在 嵌 套 的 结构 中 ， 且 只 有 margin-top 会 有 传递 的 问题 ， 
其 他 三 个 方向 是 没有 传递 问题 的 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-11 所 示 。 
【 例 6-11】 margin 传递 。 





于 <!doctype html> 

辽 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title>CSS 盒子 模型 </title> 

6 <style> 

Th body{ border:lpx black dashed; } 

8 #boxl{ width:200px; height:200px; background:blue; } 
3 #box2{ width:100px; height:100px; background:yellow; 
10 margin-top : 30px; } 

11 </style> 

12 </head> 


13 <body> 
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14 <div idq="boxl"> 

15 <div id="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 6.12 所 示 。 
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6.12 ”margin 传递 展示 效果 


图 6.12 中 可 以 看 出 ， 当 子 标签 添加 margin-top 值 时 ， 会 将 值 传 递 给 父 标 签 ， 但 有 时 
可 能 不 想 将 此 值 传递 给 父 标 签 ， 可 以 用 父 标 签 设置 padding-top 值 来 取代 子 标签 的 
margin-top 值 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-12 所 示 。 

【 例 6-12】 父 标签 设置 padding-top 值 取代 子 标签 的 margin-top 值 。 





1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title>CSS 盒子 模型 </title> 

6 <style> 

时 body{ border:1px black dashed; } 

8 #boxl{ width:200px; height:200px; background:blue; 
9 padding-top:30px; } 

10 #box2{ width:100px; height:100px; background:yellow; } 
11 </style> 

12 </head> 

13 <body> 

14 <div idq="box1"> 

15 <dqiv id="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 

16 </div> 


























第 章 ”Css 进 阶 
17 </body> 
18 </html> 
运行 结果 如 图 6.13 所 示 。 
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这 种 方式 略 显 复杂 ， 需 要 重新 计算 高 度 值 ， 从 而 保证 容器 的 大 小 。 当 然 也 可 以 直接 








解决 margin-top 的 传递 问题 ， 例 如 给 父 容器 添加 边框 或 overflow 属性 〈 即 溢出 隐藏 ， 下 


面 小 节 会 


体 如 例 6- 


介绍 )。 接 下 来 通过 案例 来 演示 为 父 容器 添加 边框 来 消除 margin 传递 问题 ， 具 
13 所 示 。 


【 例 6-13】 为 父 容 器 添加 边框 来 消除 margin 传递 问题 。 


1 
2 
3 
4 
5 
6 
7 
8 
a 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 盒子 模型 </title> 
<style> 
body{ border:lpx black dashed; } 
#boxl{ width:200px; height:200px; background:blue; 
border:1lpx black solid; } 
#box2{ width:100px; height:100px; background:yellow; 
margin-top:30px; } 
</style> 
</head> 
<body> 
<div id="box1"> 
<qdiv idq="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
</div> 
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</body> 
</html> 


行 结果 如 图 6.14 所 示 。 
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图 6.14 边框 方式 处 理 传递 问题 


下 来 通过 案例 来 演示 为 父 标签 添加 overflow 属性 消除 margin 传递 问题 , 具体 如 例 


不 。 





加 overflow 属性 消除 margin 传递 问题 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 盒子 模型 </title> 
<style> 
body{ border:lpx black dashed; } 
#boxl{ width:200px; height:200px; background:blue; 
overflow:hidden; } 
#box2{ width:100px; height:100px; background:yellow; 
margin-top:30px; } 
</style> 
</head> 
<body> 
<div id="box1"> 
<div iq="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
</div> 
</body> 
</html> 


行 结果 如 图 6.15 所 示 。 
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图 6.15 overflow 方式 处 理 传递 问题 








通过 添加 边框 或 设置 overflow 属性 可 以 解决 margin 传递 问题 , 具体 细节 后 面 的 章节 
进行 讲解 ， 这 里 了 解 即 可 。 


6.2 块 与 内 联 
第 二 章 中 已 经 简单 地 介绍 过 <div> 抉 标签 和 <span> 内 联 标签 , 但 并 未 详细 地 讲解 ， 本 
节 将 详细 讲解 块 与 内 联 的 特点 和 应 用 场景 。 
6.2.1 块 特点 


1， 独 占 一 行 


块 标签 的 特点 是 独占 一 行 ， 当 设置 两 个 <div> 标 签 时 ， 可 以 发 现 默认 为 上 下 排列 。 接 
下 来 通过 案例 来 演示 ， 有 具体 如 例 6-15 所 示 。 
【 例 6-15】 块 标签 独占 一 行 的 特点 。 


于 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 块 与 内 联 </title> 

6 </head> 

入 <body> 

8 ”<qdiv> 千 锋 教育 ， 一 家 有 品质 的 中 国 一 流 IT 职业 教育 机 构 。</div> 
9 ”<qiv> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
10 </body> 

11 </html> 
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运行 结果 如 图 6.16 所 示 。 





中 块 与 内 联 x 《 
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和 干 锋 教 育 ， 一 家 有 品质 的 中 国 一 流 IT 职业 教育 机 构 。 
做 真实 的 自己 ， 用 良心 做 教育 ! 





6.16 独占 一 行 展示 效果 
图 6.16 中 可 以 看 出 , 块 标签 默认 会 独占 一 行 , 块 标签 不 允许 其 他 标签 跟 在 它 的 后 面 。 
2. 支持 所 有 样式 


块 标签 支持 所 有 样式 ， 任 何 样式 添加 到 块 标签 上 都 会 起 作用 ， 包 括 盒子 模型 中 的 所 
有 属性 。 


3. 不 设置 宽 时 ， 其 宽 等 于 父 标 签 宽 


当 块 标签 不 设置 宽 时 , 其 宽 等 于 父 标签 的 宽 。 接 下 来 通过 案例 来 演示 , 具体 如 例 6-16 
所 示 。 
【 例 6-16】 块 标签 不 设置 宽 时 ， 宽 等 于 父 标 签 宽 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 块 与 内 联 </title> 
<style> 
#boxl{ background:red; color:white; } 
#box2{ width:300px; height:100px; background:green; color:white; } 
#box3{ background:blue; } 
10 </style> 
11 </head> 
12 <body> 
13 <div id="box1"> 干 锋 教 育 ， 一 家 有 品质 的 中 国 一 流 IT 职业 教育 机 构 。</div> 
14 <div id="box2"> 
| <div id="box3"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
16 </div> 
17 </body> 
18 </html> 


运行 结果 如 图 6.17 所 示 。 
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锋 教 育 ， 一 家 有 品质 的 中 国 一 流 IT 职业 教育 机 构 。 


做 真实 的 自己 ， 用 良心 做 教育 ! 








6.17 默认 宽度 展示 效果 


图 6.17 中 可 以 看 出 ,第 一 个 <div> 标 签 的 默认 宽 与 <body> 标 签 的 宽 相 同 ， 子 <div> 标 
签 的 宽 跟 父 <div> 标 签 的 宽 相 同 。 这 里 需要 了 解 ， E 0 i 度 与 内 容 的 高 度 相同 。 


在 盒子 模型 中 ， 


当 不 设置 宽 ， 只 设置 内 边 距 时 ， 


父 标签 宽 减 去 子 标 签 的 内 边 


接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-17 Ee 


【 例 6-17】 


Cor pr 


<!doctype html> 
<html> 
<head> 


不 写 宽 ， 只 设置 内 边 距 时 ， 宽 等 


父 标签 减 去 子 标签 的 内 边 


<meta charset="utf-8"> 
<title> 块 与 内 联 </title> 


<style> 


#box1l{ width:300px; height:100px; background:green; color:white; } 
#box2{ background:blue; padding-left:50px; } 


</style> 
</head> 

<body> 

<div id="box1"> 


<div id="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 


</div> 
</body> 
</html> 


结果 如 图 6.18 所 示 。 











D: /HTMLexample/chapter06/6-17.html 会 | : 


做 真实 的 自己 ， 用 良心 做 教育 ! 





6.18 ”默认 宽 在 盒子 模型 中 
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如 果 同 时 还 设置 了 边框 和 外 边 距 , 同样 需要 减 去 相关 设置 , 才能 得 到 当前 的 宽度 值 。 
接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-18 所 示 。 
【 例 6-18】 设置 边框 和 外 边 距 时 ， 同 样 减 去 相关 设置 ， 得 到 当前 的 宽度 值 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 块 与 内 联 </title> 

<style> 
#box1l{ width:300px; height:100px; background:green; color:white; } 
#box2{ background:blue; padding-left:50px; 


CornoONDp 


border-left:10px black solid; margin-left:S5px;} 
</style> 
</head> 
12 <body> 
13 <div id="box1"> 
14 <qiv iq="box2"> 做 真实 的 自己 ， 用 良心 做 教育 ! </div> 
15 </div> 
16 </body> 
17 </html> 


运行 结果 如 图 6.19 所 示 。 
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做 真实 的 自己 ， 用 良心 做 教育 ! 





图 6.19 默认 宽 在 盒子 模型 中 


6.2.2 ”内 联 特点 


1. 在 一 行 显示 

当 设置 两 个 <span> 标 签 时 ， 可 以 发 现 默认 为 显示 在 一 行 左右 排列 。 接 下 来 通过 案例 
来 演示 ， 上 具体 如 例 6-19 所 示 。 

【 例 6-19】 内 联 标签 在 一 行 显示 。 


出 <!doctype html> 
<html> 





运行 结果 如 图 6.20 所 示 。 
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6.20 在 一 行 显示 展示 效果 
6.20 中 可 以 看 出 ， 内 联 标签 在 一 行 显示 ， 内 联 标签 允许 其 他 标签 跟 在 它 的 后 面 。 
2. 不 支持 宽 高 ， 在 margin 和 padding 也 有 一 些 问 题 


<span> 标 签 不 支持 宽 高 ， 即 当 给 <span> 标 签 设置 宽 高 时 ， 不 起 作用 。 接 下 来 通过 案 
例 来 演示 ， 如 例 6-20 所 示 。 
【 例 6-20】 <span> 标 签 不 支持 宽 高 。 





运行 结果 如 图 6.21 所 示 。 
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做 夏 实 的 自己 ， 





图 6.21 内 联 标签 不 支持 宽 高 


<span> 标 签 在 margin 和 padding 上 也 会 有 一 些 问题 ， 当 设置 margin 和 padding 边 距 


时 ， 上 下 内 外 边 距 显示 可 能 会 出 现 问 题 ， 左 右 内 外 边 距 显示 没有 问题 。 接 下 来 通过 案例 
来 演示 ， 具 体 如 例 6-21 所 示 。 


【 例 6-21】 <span> 标 签 在 margin 和 padding 上 存在 的 一 些 问题 。 


二 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 块 与 内 联 </title> 

6 <style> 

A #boxl{ width:100px; height:100px; background:blue; color:white; 
8 padding:50px; margin-top:50px; } 

9 #box2{ width:100px; height:100px; background:blue; color:white; } 
10 </style> 

11 </head> 

12 <body> 


13 ”<span id="box1"> 做 真实 的 自己 </span> 
14 <span id="box2"> 用 良心 做 教育 。</span> 
15 </body> 
16 </html> 


运行 结果 如 图 6.22 所 示 。 
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图 6.22 内 联 标签 不 支持 margin-top 和 padding-top 


3 宽度 由 内 容 撑 开 





前 面 讲 到 ， 内 联 标签 不 支持 宽 高 。 内 联 标签 的 宽 由 内 容 撑 开 ， 高 也 由 内 容 决定 。 
4. 代码 换行 会 被 解析 
上 面 的 案例 中 可 以 看 出 两 个 <span> 标 签 之 间 会 有 一 个 小 空 阶 ， 这 是 因为 代码 换行 被 


Css 进 阶 


钴 


解析 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-22 所 示 。 


【 例 6-22】 代码 换行 被 解析 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 块 与 内 联 </title> 

<style> 
#boxl{ width:100px; height:100px; background:blue; color:white; } 
#box2{ width:100px; height:100px; background:blue; color:white; } 

</style> 

</head> 

<body> 

12 ”<span id="box1"> 做 真实 的 自己 </span> 

13 <span id="box2"> 用 良心 做 教育 。</span> 

14 </body> 

15 </html> 


运行 结果 如 图 6.23 所 示 。 
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用 良心 做 教育 . 





6.23 ”内 联 标签 之 间 的 小 空隙 


当 把 两 行 定义 <span> 标 签 的 代码 写 到 一 行 时 ， 空 阶 就 会 消失 。 接 下 来 通过 案例 来 演 
具体 如 例 6-23 所 示 。 
【 例 6-23】 两 行 定义 <span> 标 签 代码 在 一 行 ， 空 阶 消 失 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 块 与 内 联 </title> 

<style> 
#box1l{f width:100px; height:100px; background:blue; color:white; } 
#box2{ width:100px; height:100px; background:blue; color:white; } 

</style> 

</head> 

<body> 

<span igd="box1"> 做 真实 的 自己 ，</span><span id="box2"> 用 良心 做 教育 。</span> 

</body> 


Oop 
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14 </html> 


运行 结果 如 图 6.24 所 示 。 











图 6.24 ”取消 内 联 标签 之 间 的 小 空隙 


6.2.3 ” 块 标签 与 内 联 标签 的 比较 


1. 区 别 


块 标签 的 特点 是 独占 一 行 、 支 持 所 有 的 样式 和 当 块 标签 不 设置 宽 时 , 等 于 父 标签 宽 。 
内 联 标签 的 特点 是 在 一 行 显示 、 不 支持 宽 高 ，margin 和 padding 也 有 问题 ， 宽 度 由 内 容 
撑 开 和 代码 换行 会 被 解析 。 

2. 分 类 

HTML 标签 大 致 可 划分 为 块 与 内 联 这 两 大 类 , 其 中 具有 块 特点 的 标签 有 <ul>、<ol>、 
<li>、<dlj>、<dt>、<dd>、<hl>、<h2>、<h3>、<h4>、<h5>、<h6> 和 <p> 标 签 等 。 有 内 
联 特 点 的 标签 有 <strong>、<em>、<sub>、<sup>、<del>、<ins>、<blockquote>、<q>、 
<abbr>、<address>、<cite> 和 <a> 标 签 等 。 


3. 适合 场景 


因为 块 标签 支持 所 有 样式 ， 并 且 兼 容 性 极 好 ， 因 此 非常 适用 于 网 页 布局 ， 而 内 联 标 
签 由 于 很 多 样式 不 支持 ， 并 且 代码 换行 会 被 解析 出 小 空 除 ， 因 此 不 适用 于 网 页 布局 ， 一 
般 只 用 于 内 容 修饰 和 语义 化 。 


6.3 默 驳 样 人 并 


有 一 些 HTML 标签 在 默认 情况 下 有 默认 样式 , 但 这 些 默认 样式 可 能 并 不 是 网 页 开发 
中 想 要 设置 的 样式 ， 因 此 要 去 掉 这 些 样 式 ， 让 CSS 样式 还 原 回 初 始 状态 。 


6.3.1 浏览 器 调试 工具 


可 以 利用 浏览 器 调试 工具 查看 HIML 标签 的 默认 值 。 在 调试 工具 中 可 以 查看 到 
HTML 结构 和 所 添加 的 CSS 样式 ， 当 然 也 可 以 查看 到 默认 样式 。 下 面 分 步骤 讲解 如 何 使 


用 浏览 器 调试 工具 。 


(1) 打开 Chrome 浏览 器 ， 按 下 F12 键 ， 打 开 调 试 工具 ， 如 图 6.25 所 示 。 
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(2) 通过 单 击 HIML 结构 可 以 展示 对 应 的 CSS 样式 和 盒子 模型 ， 如 图 6.26 所 示 。 





<htmD 
bP ehead>c /head> 
YXbody' 


/body> 
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6.3.2 ”标签 默认 值 


1. 没有 默认 样式 的 标签 


图 6.26 HTML 结构 对 应 CSS 样式 


有 些 标签 没有 默认 样式 ， 如 <div>、<span> 等 。 通 过 调试 工具 可 以 看 到 ， 这 两 个 标签 
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没有 任何 默认 样式 。<div>、<span> 默 认 样式 如 图 6.27 所 示 。 





<div> 标 签 <span> 标 签 


图 6.27 <div>、<span> 默 认 样 式 


2， 有 默认 样式 的 标签 


有 些 标 签 有 默认 样式 ， 如 <body>、<p>、<hl>、<ul>、<a>、<li> 等 标签 。 下 面 分 别 
介绍 这 些 标签 的 默认 样式 。 

(1) <body>、<p> 

通过 调试 工具 可 以 看 到 ，<body> 标 签 默认 下 会 有 8px 的 margin 值 ，<p> 标 签 默认 下 
会 有 16px 上 下 margin 值 。<body>、<p> 默 认 样式 如 图 6.28 所 示 。 





<body> 标 签 <p> 标 签 
图 6.28 <body>、<p> 黑 认 样式 


(2) <hl>、<ul> 

通过 调试 工具 可 以 看 到 ，<hl> 标 签 默认 下 会 有 21.440px 上 下 margin 值 ，<ul> 标 签 
默认 下 会 有 16px 上 下 margin 值 和 40px 左 padding 值 。<hl>、<ul> 默 认 样式 如 图 6.29 
所 示 。 





<hl> 标 签 <ulb> 标 签 
图 6.29 <hl>、<u> 默 认 样式 


(3% ey 

一 些 标签 具备 默认 距离 外 ， 还 有 一 些 标签 具备 默认 样式 ， 如 <a> 标 签 有 默认 下 画 线 ， 
<1i> 标 签 前 面 有 默认 的 装饰 点 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-24 所 示 。 

【 例 6-24】 <a>、<1i> 默 认 样式 。 
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6.3.3 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 默 认 样式 </title> 
</head> 
<body> 
<ul> 
<1i> 列 表 </1i> 

</ul> 
<a href="#"> 链 接 </a> 
</body> 
</html> 


J 了 结果 如 图 6.30 所 示 。 


x 全 


€ © | @ tile:///D:/HTMLexample/chapter06/6-24.htal 从 | } 











。 列表 《一 一 一 默认 带 有 修饰 的 点 


链接 4 一 一 默认 带 有 下 男 线 





图 6.30 <li>、<a> 默 认 样 式 


CSS reset 


CSS reset 就 是 重 置 默认 样式 表 的 技术 ， 把 默认 样式 全 部 还 原 回 初始 值 ， 并 且 根 据 项 
目的 不 同 ，CSS reset 的 方案 也 会 有 些 区 别 。 
根据 前 面 小 节 中 的 总 结 ， 来 实现 一 个 简单 的 CSS reset 方案 ， 有 具体 示例 如 下 。 


下 
3 
4 
S 


<style> 
body,p,ul,ol,hl,h2,h3,h4,h5,h6{ margin : 0; padding :0; } 
li{ list-style : none; } 
a{ text-decoration : none; } 

</style> 


有 时 为 了 演示 代码 ， 可 以 设置 一 个 通 配 选 择 符 ， 但 是 在 正式 的 项 目 中 尽量 不 要 用 通 
配 选择 符 。 具 体 示 例如 下 。 
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<style> 
*{ margin : 0; padding :0; } 
li{ list-style : none; } 
af text-decoration : none; } 
</style> 


接 下 来 通过 一 个 案例 来 演示 图 片 有 空隙 展示 效果 ， 有 具体 如 例 6-25 所 示 。 
【 例 6-25】 图 片 有 空隙 展示 效果 。 


mm ww N PP 


bp <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 默 认 样式 </title> 

6 <style> 

了 *{ margin:07 padding:0; } 
8 li{ list-style:none; } 

9 a{ text-decoration:none; } 
10 div{ border:1lpx #000 solid; } 
11 </style> 

12 </head> 

13 <body> 

14 <div> 

<img src="qianfeng.jpg"> 
16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 6.31 所 示 。 





CG | © sile:///D:/HTLexanple/chapter06/6-25. html 六 | : 





即使 必 到 最 高 的 山上 ， 
一 次 也 只 能 脚踏实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 





图 6.31 图 片 有 空隙 展示 效果 
图 6.31 中 界面 的 右边 也 会 有 空隙 产 生 ， 是 因为 在 垂直 方向 上 也 存在 着 对 齐 方式 ， 而 


图 片 默认 是 对 齐 文字 的 基线 ， 再 把 文字 添加 进去 ， 最 后 把 文字 的 字体 放大 。 接 下 来 通过 
一 个 案例 来 演示 图 片 默认 与 文字 基线 对 齐 ， 具 体 如 例 6-26 所 示 。 


章 ， Css 进 阶 yr 
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【 例 6-26】 图 片 默 认 与 文字 基线 对 齐 。 


L <!doctype html> 

之 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 默 认 样 式 </title> 

6 <style> 

| *{ margin:0; padding:0; } 

8 li{ list-style:none; } 

9 a{ text-decoration:none; } 
10 div{ border:1px #000 solid; font-size:50px; } 
11 </style> 

12 </head> 

13 <body> 

14 <div> 

5 <img src="qianfeng.jpg">xyz 
16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 6.32 所 示 。 
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即使 用 到 最 高 的 山上 ， an 
一 次 也 只 能 廊 路 实地 地 迈 一 步 。 
一干 生成 功 心 衣 & XVZ 


6.32 图片 默认 与 文字 基线 对 齐 


图 6.32 中 布局 会 受到 影响 ， 因 此 可 以 根据 vertical-align 属性 来 调节 对 齐 方式 。 接 下 
来 通过 案例 来 演示 vertical-align 属性 的 展示 效果 ， 有 具体 如 例 6-27 所 示 。 
【 例 6-27】 vertical-align 属性 的 展示 效果 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 默 认 样 式 </title> 
<style> 


ANDpp 


*{ margin:0; padding:0; } 
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li{ list-style:none; } 
af text-decoration:none; } 
10 div{ border:1lpx #000 solid; font-size:50px; } 
是 下 img{ vertical-align:bottom; } 
12 </style> 
13 </head> 
14 <body> 
15 <div> 
16 <img src="qianfeng.jpg">xyz 
17 </div> 
18 </body> 
19 </html> 


运行 结果 如 图 6.33 所 示 。 





即使 用 到 最 高 的 山上 ， 
一 次 也 只 能 脚踏实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 





6.33 ”vertical-align 属性 展示 效果 


例 6-27 中 ， 演 示 了 vertical-align 属性 的 展示 效果 ， 当 然 它 还 可 以 选择 其 他 常用 值 。 
接 下 来 通过 一 个 案例 来 演示 vertical-align 属性 选择 top、middle 常用 值 ， 具 体 如 例 6-28 
所 示 。 

【 例 6-28】 vertical-align 属性 选择 top、middle 常用 值 。 


2 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 默 认 样 式 </title> 

6 <style> 

到 *{ margin:07 padding:0; } 
8 li{ list-style:none; } 

9 a{ text-decoration:none; } 
10 div{ border:1lpx #000 solid; } 
11 </style> 

12 </head> 

13 <body> 

14 <div> 


5 <img src="qianfeng.jpg" style="vertical-align:top;">xyz 


16 </div> 
17 <div> 


18 <img src="qianfeng.jpg" style="vertical-align:middle">xyz 


19 </div> 
20 </body> 
21 </html> 


运行 结果 如 图 6.34 所 示 。 











使 必 到 最 高 的 山上 ， 
一 次 也 只 能 脚 路 实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 


使 用 到 最 高 的 山上 ， 
一 次 也 只 能 脚踏实地 地 迈 一 步 。 
一 干 锋 成 功 心 语 





6.34 ”vertical-align 属性 展示 效果 


最 终 给 出 一 个 简易 的 CSS reset 方案 , 当然 根据 项 目的 需求 , 可 能 会 添加 更 多 的 设置 ， 


具体 示例 如 下 。 


<style> 
/* CSS reset start */ 


一 


*{ margin : 0; padding :0; 


li{ list-style : none; } 


一 一 


img{ vertical-align : top; 
/* CSS reset end */ 


1 
2 
村 
4 
5 af text-decoration : none; 
6 
可 
8 </style> 


6.4 其 他 帝 用 样式 


本 小 节 中 ， 将 继续 讲解 一 些 常用 的 CSS 样式 。 掌 握 这 些 CSS 样式 ， 可 以 为 后 面 的 


学 习 打 下 坚实 的 基础 。 
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6.4.1 显示 框 类 型 


CSS 样式 中 通过 display 属性 来 设置 显示 框 类 型 ， 显 示 框 类 型 指 的 是 对 HTML 标签 
的 显示 方式 ， 属 性 常用 的 设置 值 有 none、block、inline 和 inline-block 四 种 。 下 面 将 分 别 
讲解 这 四 种 取 值 的 使 用 。 


1. none 


当 对 一 个 元 素 进行 不 显示 操作 时 ,就 可 以 设置 none 这 个 值 。 接 下 来 通过 案例 来 演示 ， 
具体 如 例 6-29 所 示 。 
【 例 6-29】 为 元 素 设置 none 值 ， 进 行 不 显示 操作 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 其 他 常用 样式 </title> 

<style> 
#boxl{ width:200px; height:50px; background:red; } 
#box2{ width:200px; height:50px; background:green; 


oarnowoDpr 


display:none;} 
0 #box3{ width:200px; height:50px; background:blue; } 
11 </style> 
2 </head> 
3 <body> 
4 <div id="box1l"></div> 
5 <div id="box2"></div> 
6 <div id="box3"></div> 
7 </body> 
8 </html> 





运行 结果 如 图 6.35 所 示 。 











四 其 他 党 用 样式 x 
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图 6.35 display 为 none 展示 效果 


图 6.35 中 可 以 看 出 , 设置 none 值 后 ,元 素 会 隐藏 起 来 且 不 占用 页 面 的 空间 。 在 CSS 
样式 中 还 有 对 隐藏 操作 的 样式 , 即 visibility 属性 。 接 下 来 通过 案例 来 演示 visibility 属性 ， 
具体 如 例 6-30 所 示 。 

【 例 6-30】 visibility 属性 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 其 他 常用 样式 </title> 
<style> 
#boxl{ width:200px; height:50px; background:red; } 
#box2{ width:200px; height:50px; background:green; 
visibility:hidden; } 
#box3{ width:200px; height:50px; background:blue; } 
1 </style> 
</head> 
13 <body> 
4 <div id="boxl"></div> 
15 <div id="box2"></div> 
<div id="box3"></div> 
7 </body> 
8 </html> 


CoroNp 
So 





运行 结果 如 图 6.36 所 示 。 





四 其 他 常用 样式 x 用 


© | © file:///D:/HTMLexample/chapter06/6-30.htnl 从 








图 6.36 ”visibility 为 hidden 展示 效果 





图 6.36 中 可 以 看 出 ， 当 visibility 为 hidden 值 时 ， 只 是 对 元 素 进 行 了 隐藏 ， 但 还 会 
占据 空间 位 置 。 


2. block 


block 值 可 以 把 元 素 显 示 成 块 标 签 类 型 ， 把 block 值 作用 到 <span> 标 签 上 ，<span> 标 
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签 就 具备 了 块 标签 的 特点 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-31 所 示 。 
【 例 6-31】 block 值 作用 在 <span> 标 签 上 ，<span> 标 签 具 备 块 标签 特点 。 


证 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 其 他 常用 样式 </title> 
6 <style> 

玉 span{f width:100px; height:50px; background: red; display:block; } 
8 </style> 

9 </head> 

10 <body> 

11 <span> 做 真实 的 自己 </span> 
12 <span> 用 良心 做 教育 </span> 
13 </body> 

14 </html> 


运行 结果 如 图 6.37 所 示 。 


六 其 他 常用 样式 x 《ae 
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6.37 display 为 block 展示 效果 


图 6.37 中 可 以 看 出 ，<span> 标 签 不 再 具备 内 联 的 特点 ， 而 是 具备 了 支持 宽 高 属性 ， 
独占 一 行 的 块 标签 特点 。 


3. inline 


inline 值 可 以 把 元 素 显示 成 内 联 标签 类 型 ， 把 inline 值 作用 到 <div> 标 签 上 ，<div> 标 
签 即 具 备 了 内 联 标签 的 特点 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 6-32 所 示 。 
【 例 6-32】 inline 值 作 用 在 <div> 标 签 上 ，<div> 标 签 具备 了 内 联 标签 的 特点 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 其 他 常用 样式 </title> 
<style> 


GO 心 wb 


运 和 


div{ width:100px; height:50px; background:red; display:inline; } 
</style> 
</head> 
<body> 
<div> 做 真实 的 自己 </div> 
<qdiv> 用 良心 做 教育 </div> 
</body> 
</html> 


了 结果 如 图 6.38 所 示 。 


口 其 他 党 用 样式 x We 
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6.38 ”display 为 inline 展示 效果 


图 6.38 中 可 以 看 出 ，<div> 标 签 不 再 具备 块 的 特点 ， 而 是 具备 了 在 一 行 显示 和 不 支 
持 宽 高 属性 的 内 联 标签 特点 。 


4. 


inline-block 


inline-block 值 可 以 把 元 素 显示 成 既 具 备 块 的 特点 又 具备 内 联 的 特点 。 接 下 来 通过 案 
例 来 演示 ， 具 体 如 例 6-33 所 示 。 
【 例 6-33】 inline-block 值 可 以 将 元 素 显 示 成 既 具 备 块 的 特点 又 具备 内 联 的 特点 。 


OooDNDpe 


户 户 
| 一 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 其 他 常用 样式 </title> 
<style> 
div{ width:100px; height:50px; background:red; 
display:inline-block; } 
span{width:100px; height:50px; background:red; 
display:inline-block; } 
</style> 
</head> 
<body> 
<div> 做 真实 的 自己 </div> 
<div> 用 良心 做 教育 </div> 
<span> 做 真实 的 自己 </span> 
<span> 用 良心 做 教育 </span> 
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18 </body> 
19 </html> 


运行 结果 如 图 6.39 所 示 。 


四 其 他 常用 样式 x Wl 
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图 6.39 display 为 inline-block 展示 效果 





图 6.39 中 可 以 看 出 ，<div> 标 签 和 <span> 标 签 排 在 了 一 行 ， 并 且 支 持 宽 高 属性 。 这 
说 明 它们 既 具 备 块 的 特点 也 具备 内 联 的 特点 。 

这 里 要 注意 , 一 般 情况 下 不 建议 去 改变 HTML 标签 的 默认 显示 框 类 型 ,除非 在 一 些 
特殊 的 需求 上 ， 后 面 章 节 中 会 给 大 家 举 一 些 实际 开发 的 例子 


6.4.2 ”溢出 隐藏 


CSS 样式 中 通过 overflow 属性 来 设置 溢出 隐藏 ,溢出 隐藏 指 的 是 当 内 容 溢出 元 素 框 
时 发 生 的 操作 。 常 用 的 设置 值 有 visible、hidden、scroll 和 auto 四 种 ， 下 面 将 分 别 介绍 四 
种 取 值 的 用 法 。 


1. visible 


Visible 值 是 overflow 属性 的 默认 值 ， 内 容 溢 出 不 会 被 修 前 ， 在 元 素 框 外 显示 。 接 下 
来 通过 案例 来 演示 ， 有 具体 如 例 6-34 所 示 。 
【 例 6-34】 visible 值 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 其 他 常用 样式 </title> 
<style> 
#box{ width:300px; height:100px; border:1lpx black solid; 
overflow:visible; } 
</style> 
</head> 
<body> 
<diviqg="box"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 , 一 直 秉承 "用 良心 做 教育 "的 理念 ， 


Oo Dp 


Pp 
DD-=» Oo 


Te 是 中 国 IT 职业 教育 领先 品牌 , 全 力 打造 互联 网 研发 人 才 服务 优质 平台 。 公 司 总 部 位 于 北京 ， 
14 目前 已 在 深圳 、 上 上海、 郑州、 广州、 大连、 武汉 、 成 都 、 西 安 、 杭 州 、 青 岛 

TS 重庆 、 长 沙 、 哈 尔 滨 成 立 了 分 公司 。</div> 

16 </body> 

17 </html> 


运行 结果 如 图 6.40 所 示 。 


站 其 他 常用 样式 x 用 
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帮 知 教育 隶属 于 北京 干 综 互联 科技 有 限 公 
间 ,一 直 乘 承 "用 良心 做 教育 "的 理念 ， 是 
中 国 IT 职业 教育 领先 品牌 全力 打造 互联 
网 研发 人 才 服务 优质 平台 。 公 司 总 部 位 于 
i SR bb 
州 、 大 连 、 武 汉 、 成 都 、 西 安 、 杭 州 、 青 
咏 重庆 、 长 沙 、 哈 尔 滨 成 立 了 分 公司 。 








6.40 ”overflow 为 visible 展示 效果 
图 6.40 中 可 以 看 出 ， 当 内 容 超出 元 素 框 的 范围 ， 内 容 不 做 任何 隐藏 或 修剪 操作 。 
2. hidden 


hidden 值 可 以 对 溢出 的 内 容 进行 修剪 ， 旦 修剪 的 内 容 不 会 被 显示 。 接 下 来 通过 案例 
来 演示 ， 具 体 如 例 6-35 所 示 。 
【 例 6-35】 hidden 值 的 使 用 。 


得 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 其 他 常用 样式 </title> 

6 <style> 

2 #box{ width:300px; height:100px; border:lpx black solid; 

8 overflow:hidden; } 

9 </style> 

10 </head> 

11 <body> 

12 <divig="box"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 , 一 直 秉承 "用 良心 做 教育 "的 理念 ， 
3 是 中 国 IT 职业 教育 领先 品牌 , 全 力 打 造 互联 网 研发 人 才 服 务 优质 平台 。 公司 总 部 位 于 北京 ， 
14 目前 已 在 深圳 、 上 上海、 郑州、 广州、 大连、 武汉 、 成 都 、 西 安 、 杭 州 、 青 岛 
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重庆 、 长 沙 、 哈 尔 滨 成 立 了 分 公司 。</div> 
</body> 
</html> 


运行 结果 如 图 6.41 所 示 。 


$ 


四 其 他 党 用 样式 x 用 


© | © File:///D:/HIMLexample/chapter06/6-35.html 从 | : 

















育 隶 属于 北京 千 锋 互联 科技 有 限 公 

司 ， 一 直 秉 承 "用 良心 做 教育 "的 理念 ， 是 
中 国 IT 职业 教育 领先 品牌 ， 全 力 打造 互联 

网 研发 人 才 服 务 优质 平台 。 公 司 总 部 位 于 
京 ”有 目前 已 在 深圳 _ 上 海 _ 郑州 广 








6.41 overflow 为 hidden 展示 效果 


scroll 


scroll 值 可 以 对 元 素 设置 滚动 条 ， 当 内 容 溢出 时 ， 可 通过 拖 电 滚动 条 来 查看 溢出 的 
内 容 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 6-36 所 示 。 
【 例 6-36】 scroll 值 的 作用 。 


Oo rN 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 其 他 常用 样式 </title> 

<style> 

#box{ width:300px; height:100px; border:1px black solid; 
overflow:scroll; } 

</style> 

</head> 

<body> 

<divig="box"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 , 一 直 秉承 "用 良心 做 教育 "的 理念 ， 
是 中 国 IT 职业 教育 领先 品牌 , 全 力 打造 互联 网 研发 人 才 服务 优质 平台 。 公 司 总 部 位 于 北京 ， 
目前 已 在 深圳 、 上 海 、 郑 州 、 广 州 、 大 连 、 武 汉 、 成 都 、 西 安 、 杭 州 、 青 岛 
重庆 、 长 沙 、 哈 尔 滨 成 立 了 分 公司 。</div> 

</body> 

</html> 


运行 结果 如 图 6.42 所 示 。 
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口 其 他 常用 样式 


和 了 了 已 | @ sile:///D:/HmtLexanple/chaprer06/6-56.html 廊 


育 隶 属于 北京 千 锋 互联 科技 有 限 之 














公司 ,一直 对 承 "用 良心 做 教育 "的 理 。 
， 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 

了 造 互联 网 研发 人 才 服务 优质 平台 。 公 ~ 

4 


>» 








6.42 overflow 为 scroll 展示 效果 


这 里 要 注意 ， 当 内 容 没 有 溢出 时 ， 也 会 自动 添加 滚动 条 样式 。 接 下 来 通过 案例 来 演 
具体 如 例 6-37 所 示 。 
【 例 6-37】 当 内 容 无 溢出 时 ， 自 动 添加 滚动 条 样式 。 

















1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title> 其 他 常用 样式 </title> 
6 <style> 
#box{ width:300px; height:100px; border:1lpx black solid; 
8 overflow:scroll; } 
9 </style> 
10 </head> 
11 <body> 
12 <div id="box"></div> 
13 </body> 
14 </html> 
运行 结果 如 图 6.43 所 示 。 
6.43 ”overflow 为 scroll 展示 效果 
4. auto 


auto 值 是 “ 自 适 应 ”的 意思 ， 当 内 容 没 有 溢出 时 不 添加 滚动 条 ， 当 内 容 有 溢出 时 再 
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添加 滚动 条 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 6-38 所 示 。 


【 例 6-38】 auto 值 的 作用 。 


Coop 人 oDNprp 


FF RPR PP 
ownmwnb hh 





<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 其 他 常用 样式 </title> 

<style> 

#box{ width:300px; height:100px; border:lpx black solid; 
overflow:auto; } 

</style> 

</head> 

<body> 

<div id="box"></div> 

<div id="box"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉 承 "用 良心 做 教育 "的 理念 ， 
是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打 造 互联 网 研发 人 才 服 务 优质 平台 。 公 司 总 部 位 于 北京 ， 
目前 已 在 深圳 、 上 上海、 郑州、 广州、 大连、 武汉 、 成 都 、 西 安 、 杭 州 、 青 岛 
重庆 、 长 沙 、 哈 尔 滨 成 立 了 分 公司 。</div> 

</body> 

</html> 


运行 结果 如 图 6.44 所 示 。 


中 其 他 党 用 样式 x 全 
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| 十 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 个 
公司 ， 一 直 生 承 "用 良心 做 教育 "的 理 

仿 ， 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 
的 造 互联 网 研发 人 才 | 本 和 人 本 汪 全 。 公 


同 总 So: - 











6.44 overflow 为 auto 展示 效果 


如 果 只 针对 水 平 或 垂直 方向 单独 设置 滚动 条 , 可 以 通过 overflow-x 属性 或 overflow-y 
属性 来 针对 某 一 个 方向 设置 深 动 条 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 6-39 所 示 。 
【 例 6-39】 通过 overflow-x 属性 或 overflow-y 属性 针对 某 一 个 方向 设置 滚动 条 。 


oawmnmm wm 


6.4.3 


<!dqoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 其 他 常用 样式 </title> 
<style> 
#box{ width:300px; height:100px; border:1lpx black solid; 
overflow-y : scroll; } 
</style> 
</head> 
<body> 
<div id="box"></div> 
</body> 
</html> 


运行 结果 如 图 6.45 所 示 。 


站 其 他 常用 样式 
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6.45 ”overflow-y 展示 效果 


透明 度 


对 HTML 标签 进行 透明 度 设置 是 网 页 开发 中 的 常用 方式 。 透 明度 设置 分 为 opacity 
和 rgba 两 种 方式 。 下 面 将 详细 讲解 这 两 种 方式 。 


1. opacity 

















opacity 值 可 用 来 设置 元 素 的 透明 度 ，opacity 取 值 范围 为 0 一 1，0 表示 完全 透明 ，1 
表示 不 透明 ， 半 透明 就 可 以 设置 为 0.5。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 6-40 所 示 。 
【 例 6-40】 opacity 值 设 置 元 素 透 明度 。 


心 w_ N 

















<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
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5 ”<title> 其 他 常用 样式 </title> 

6 <style> 

#box{ width:200px; height:50px; background:red; opacity:0.5; } 
8 </style> 

9 </head> 

10 <body> 

11 <div id="box"> 做 真实 的 自己 ， 用 良心 做 教育 。</div> 

12 </body> 

13 </html> 


运行 结果 如 图 6.46 所 示 。 


口 其 他 常用 样式 
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6.46 ”opacity 展示 效果 





图 6.46 中 可 以 看 出 , 元 素 的 背景 颜色 和 内 容 都 进行 了 半 透 明 的 处 理 , 但 是 有 时 只 需 
背景 半 透 明 而 内 容 无 须 半 透明 ， 可 以 采用 第 二 种 方式 来 实现 。 


2. rgba 


前 面 章 节 中 , 介绍 过 rgb 的 颜色 设置 , 而 rgba 除 设置 颜 色 外 还 可 以 设置 透明 度 。rgba 
的 取 值 范围 也 是 0 一 1。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 6-41 所 示 。 
【 例 6-41】 rgba 值 设 置 透明 度 。 


<!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 其 他 常用 样式 </title> 

6 <style> 

T #box{ width:200px; height:50px; background:rgba(255,0,0,0.5); } 
8 </style> 

9 </head> 

10 <body> 

11 <qiv id="box"> 做 真实 的 自己 ， 用 良心 做 教育 。</div> 
12 </body> 

13 </html> 


运行 结果 如 图 6.47 所 示 。 


六 其 他 常用 样式 


ls: | © £ile:///D:/HTMLexanple/chapter06/6-41. htnl 妆 | : 











6.47 rgba 展示 效果 


图 6.47 中 可 以 看 出 ， 当 设置 rgba 值 时， 背景 色 呈 半 透 明 ， 而 内 容 不 透明 。 如 果 想 
让 内 容 半 透明 ， 可 针对 color 属性 再 次 设置 rgba。 这 种 方式 比较 灵活 。 





6.5 本 章 小 结 


通过 本 章 的 学 习 ， 掌握 CSS 盒子 模型 的 概念 和 用 法 ， 对 后 续 的 布局 操作 有 很 大 的 帮 
助 。 本 章 讲解 块 与 内 联 的 特点 和 默认 样式 。 在 下 一 章 中 ,将 学 习 CSS 中 两 个 特点 重要 的 
样式 ， 浮 动 与 定位 ， 这 属于 CSS 语法 中 的 核心 部 分 。 


6.6 己 是 
1. 填空 是 
(1) 盒子 模型 包括  、  、 .等 
重要 的 CSS 元 素 。 


(2) 定义 显示 框 样式 的 属性 是 
(3) 盒子 与 盒子 之 问 的 距离 称 为 。 
(4) 设置 两 个 块 标签 时 ， 默 认 的 排列 顺序 是 _  _ __。 


(5) 透明 度 设 置 分 为 和 两 种 方式 。 
2. 选择 题 


(1) CSS 样式 padding 属性 书写 不 正确 的 是 ( )5 
A. 两 个 值 代表 的 填充 顺序 为 上 下 填充 、 左 右 填充 
B. 一 个 值 代表 的 填充 为 四 边 填充 
C. 三 个 值 代表 的 填充 顺序 为 左 填 充 、 上 下 填充 、 右 填充 
D. 四 个 值 代表 的 填充 顺序 为 上 填充 、 右 填充 、 下 填充 、 左 填充 
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(2) 下 列 哪 种 HTML 标签 不 属于 块 标签 类 型 ? ( ) 


C. <p> I 
(3) 在 CSS 中 关于 margin 属性 描述 正确 的 是 
A. margin 只 能 取 一 个 值 
B. margin 属性 值 不 可 为 auto 
C. margin 属性 参数 值 不 能 全 部 设置 成 0 








A. <div> B. <span> 


<hl> 
( 六 


D. margin 属性 参数 有 margin-left,margin-right,margin-bottom,margin-top 








(4) 下 面 不 属于 块 标签 特点 的 是 ss 
A. 独占 一 行 B. 
C. 宽度 由 内 容 撑 开 D. 
(5) 下 列 标签 中 没有 默认 样式 的 是 入 
A. <div> B. 
C. < 了 
3. 思考 题 


(1) 请 简 述 CSS 盒 模型 都 包含 哪些 样式 元 素 。 
(2) 请 简 述 内 联 标签 与 块 标签 的 区 别 。 


宽 等 于 父 标签 宽 
支持 所 有 类 型 


<body> 
<hl> 





第 7 音 ehapPter / . 
CSS 浮动 与 定位 


本 章 学 习 目标 

。 掌握 CSS 浮动 的 原理 和 清除 浮动 的 处 理 ; 

。 掌握 CSS 定位 的 四 种 模式 ; 

。 了 解 BFC 概念 。 

前 面 的 章节 中 已 经 学 习 过 如 何 使 用 内 联 元 素 实现 标签 在 网 页 中 左右 排列 的 布局 ， 但 
内 联 元 素 不 适合 做 布局 处 理 ， 只 适合 对 内 容 进行 修饰 操作 。 因 此 想 要 在 网 页 中 实现 左右 
排列 布局 ,可 以 在 CSS 中 对 块 元 素 设置 浮动 实现 左右 排列 。 本 章 将 通过 讲解 浮动 原理 和 
CSS 定位 来 对 网 页 进行 丰富 、 合 理 的 布局 。 


7.1 浮动 原理 


CSS 浮动 是 网 页 布局 中 重要 的 组 成 元 素 。“ 浮 ” 指 元 素 可 以 脱离 文档 流 ， 漂 浮 到 网 
页 上 面 ;“ 动 ” 指 元 素 可 以 偏 移 位置 ， 挪 动 到 指定 位 置 。 下 面 就 来 讲解 浮动 的 原理 。 


7.1.1 脱离 文档 流 


文档 流 是 元 素 在 页 面 中 出 现 的 先后 顺序 。 元 素 在 没有 任何 CSS 样式 修饰 的 情况 下 ， 
元 素 的 排列 方式 就 属于 正常 文档 流 ， 即 窗 体 自 上 而 下 分 成 一 行 行 ， 并 在 每 行 中 按 从 左 到 
右 的 顺序 排放 元 素 。 接 下 来 通过 案例 来 演示 正常 文档 流 ， 具 体 如 例 7-1 所 示 。 

【 例 7-1】 正常 文档 流 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
</head> 

<body> 
<div>div1</div> 





可 有明 
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9 <xdiv>div2</div> 
10 <div>div3</div> 
11 </body> 
12 </html> 


运行 结果 如 图 7.1 所 示 。 
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div1 
div2 
div3 





图 7.1 正常 文档 流 展示 效果 


所 谓 的 脱离 文档 流 就 是 利用 CSS 样式 使 元 素 在 HTML 结构 中 的 顺序 和 展示 出 来 的 
顺序 不 一 致 。 脱 离 文档 流 展 示 效 果 如 图 7.2 所 示 ， 它 是 相对 于 正常 文档 流 而 言 的 。 





El 
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div3 
divi 
div2 





7.2 ”脱离 文档 流 展示 效果 


7.1.2 float 属性 


CSS 中 利用 float 属性 来 设置 浮动 操作 。 当 被 设置 成 浮动 的 元 素 时 , 会 按照 一 个 指定 
的 方向 移动 , 直至 到 达 父 容器 的 边界 或 者 另外 一 个 浮动 元 素 浮动 停止 其 值 有 none、left 
和 right 三 个 。 下 面 介绍 不 同 取 值 和 含义 。 


1. none 

none 值 为 默认 值 ， 表 示 不 进行 浮动 操作 ， 元 素 处 于 正常 文档 流 。 

2. left 

left 值 表示 对 元 素 进行 左 浮动 ， 元 素 会 沿 着 父 容器 靠 左 排列 且 脱 离 文档 流 。 接 下 来 


通过 案例 来 演示 float 属性 值 为 left 时 的 使 用 ， 具 体 如 例 7-2 所 示 。 
【 例 7-2】 float 属性 为 left 时 的 使 用 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:green; float:left; } 
#box3{ width:80px; height:80px; background:blue; } 
0 </style> 
11 </head> 
12 <body> 
13 <div idq="box1"> 
4 <div id="box2"></div> 
5 <div id="box3"></div> 
6 </div> 
17 </body> 
8 </html> 


运行 结果 如 图 7.3 所 示 。 


Oo NDp 








站 浮动 原理 x 和 








€ © | © file:///D:/HTMLexample/chapter07/7-2. html 女 | : 








图 7.3 box2 设置 左 浮动 效果 
图 7.3 中 可 以 看 出 ，box2 脱离 了 文档 流 ， 浮 在 box3 的 上 面 〈 因 为 box2 不 再 具备 正 
常 文档 流 的 空间 ， 因 此 box3 会 向 上 移动 )， 而 且 box2 沿 着 它 的 父 容器 box1 靠 左 侧 进 行 
排列 。 


3. right 


right 值 表示 对 元 素 进行 右 浮动 ， 元 素 会 沿 着 父 容器 靠 右 排 列 ， 并 且 脱 离 文档 流 。 接 
下 来 通过 案例 来 演示 float 属性 值 为 right 时 的 使 用 ， 有 具体 如 例 7-3 所 示 。 
【 例 7-3】 float 属性 值 为 right 时 的 使 用 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:green; float:right; } 
#box3{ width:80px; height:80px; background:blue; } 
0 </style> 
11 </head> 
2 <body> 
3 <xdiv id="box1"> 
14 <div id="box2"></div> 
S <div id="box3"></div> 
6 </div> 
7 </body> 
8 </html> 


运行 结果 如 图 7.4 所 示 。 


oaDwm 必 wm 
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图 7.4 box2 设置 右 浮动 效果 


图 7.4 中 可 以 看 到 ，box2 沿 着 它 的 父 容 器 boxl 靠 右 侧 进行 排列 。 

当 给 box2 和 box3 都 添加 浮动 时 ， 它 们 都 会 脱离 文档 流 。 它 们 处 于 同一 平台 ， 所 以 
会 紧 挨 在 一 起 ， 从 而 实现 左右 排列 的 布局 方案 。 还 可 以 同时 靠 左 、 靠 右 或 是 左右 分 开 
排列 。 

(1) 靠 左 排列 

box2 和 box3 的 float 属性 同时 设置 为 靠 左 排列 ， 两 个 元 素 会 紧 挨 在 一 起 ， 排 列 在 左 
侧 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-4 所 示 。 

【 例 7-4】 靠 左 排列 。 


侧 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:gray; float:left; } 
#box3{ width:80px; height:80px; background:blue; float:left; } 
</style> 
</head> 
<body> 
<div id="box1"> 
<div id="box2"></div> 
<div id="box3"></div> 
</div> 
</body> 
</html> 


了 结果 如 图 7.5 所 示 。 


a x 和 = 











7.5 ”box2、box3 都 设置 左 浮动 效果 


(2) 靠 右 排列 

box2 和 box3 的 float 属性 同时 设置 为 靠 右 排列 ， 两 个 元 素 会 紧 挨 在 一 起 ， 排 列 在 右 
接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-5 所 示 。 

【 例 7-5】 靠 右 排列 。 


wm 必 wwN PP 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
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6 <style> 

可 #boxl{ width:150px; height:150px; background:red; } 

8 #box2{ width:50px; height:50px; background:gray; float:right; } 
9 #box3{ width:80px; height:80px; background:blue; float:right; } 
10 </style> 

11 </head> 

12 <body> 

13 <div id="box1"> 

14 <div id="box2"></div> 

5 <div id="box3"></div> 

16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 7.6 所 示 。 
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7.6 ”box2、box3 都 设置 右 浮动 效果 


(3) 左右 分 开 排列 

box2 设置 为 左 浮动 ，box3 设置 为 右 浮动 ， 两 个 元 素 会 左右 分 开 排 列 。 接 下 来 通过 
案例 来 演示 左右 分 开 排列 ， 具 体 如 例 7-6 所 示 。 

【 例 7-6】 左右 分 开 排列 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:green; float:left; } 
#box3{ width:80px; height:80px; background:blue; float:right; } 
</style> 


OCODNDpp 
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章 CSS 浮动 与 定位 199 
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11 </head> 

12 <body> 

13 <div id="box1"> 

14 <div id="box2"></div> 
5 <div id="box3"></div> 
16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 7.7 所 示 。 


全 ar 
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7.7 box2 设置 左 浮动 ，box3 设置 右 浮动 效果 


7.1.3 float 的 注意 点 


CSS 中 的 float 属性 比较 复杂 ， 有 很 多 需要 注意 的 点 ， 下 面 依次 进行 讲解 。 
1. 只 会 影响 后 面 的 元 素 


float 属性 只 会 影响 到 后 面 元 素 的 布局 ， 而 对 之 前 的 元 素 不 会 造成 任何 的 影响 。 如 为 
box3 元 素 添 加 浮动 ， 不 会 影响 到 前 面 的 box2 元 素 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 
7-7 所 示 。 

【 例 7-7】 只 会 影响 后 面 的 元 素 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 浮 动 原理 </title> 

<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:gray; } 
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9 #box3{ width:80px; height:80px; background:blue; float:right; } 
10 </style> 

11 </head> 

12 <body> 

13 <div id="boxl"> 

14 <div id="box2"></div> 

lo <div id="box3"></div> 

16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 7.8 所 示 。 


~ Try 
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图 7.8 box3 设置 右 浮动 效果 


2. 内容 默认 提升 半 层 


正常 文档 流 位 于 页 面 的 底层 , 而 脱离 文档 流 位 于 页 面 的 上 层 , 那么 当 有 内 容 存 在 时 ， 
内 容 默 认 在 底层 与 上 层 之 间 的 位 置 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-8 所 示 。 
【 例 7-8】 内 容 默 认 提 升 半 层 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:green; float:left;} 
#box3{ width:80px; height:80px; background:blue; color:white; } 
</style> 
</head> 
<body> 


OopDpp 


FF 
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淹 


<div id="box1"> 
<div id="box2"></div> 
<div id="bozx3"> 内 容 </div> 
</div> 
</body> 
</html> 


结果 如 图 7.9 所 示 。 
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7.9 内 容 默 认 提 升 半 层 效果 


图 7.9 中 可 以 看 出 ， 内 容 并 没有 在 浮动 元 素 的 下 面 ， 而 是 在 外 面 ， 其 实 这 就 是 内 容 
默认 会 提升 半 层 。 可 以 利用 这 个 特点 ， 来 实现 图 文 混 排 的 效果 。 接 下 来 通过 案例 来 演示 
图 文 混 排 ， 具 体 如 例 7-9 所 示 。 

【 例 7-9】 图 文 混 排 。 


oO ornoDpp 


PP RPR PP 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#box{ width:500px; background:red; } 
#box img{ float:left;} 
</style> 
</head> 
<body> 
<div id="box"> 
<img src="qianfeng .jpg"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉 承 " 
用 良心 做 教育 "的 理念 ,是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打造 互联 网 研发 人 才 服 务 优质 
平台 。 公 司 总 部 位 于 北京 ， 目 前 已 在 深圳 、 上 海 、 郑 州 、 广 州 、 大 连 、 武 汉 、 成 都 、 西 安 、 
杭州 、 青 岛 、 重 庆 、 长 沙 、 哈 尔 滨 成 立 了 分 公司 。 拥 有 全 国 的 移动 互联 网 教学 就 业 保障 团队 ， 
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做 到 了 毕业 学 员 业内 高 薪水 ， 成 为 学 员 信赖 的 IT 培训 机 构 。 


</div> 
</body> 
</html> 
结果 如 图 7.10 所 示 。 
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即使 了 到 最 高 的 山上 ， 
三 次 也 只 能 脚 路 实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 





7.10 ”图 文 混 排 展示 效 果 


3. 默认 宽 根 据 内 容 确 定 


当 未 给 浮动 的 元 素 设置 宽度 时 ， 浮 动 元 素 的 宽 与 内 容 的 宽 相同 。 浮 动 的 元 素 改变 了 
块 标签 的 特点 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-10 所 示 。 
【 例 7-10】 默认 宽 根 据 内 容 确 定 。 


1 
之 
3 
4 
到 
6 
7 
8 
9 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:300px; height:100px; background:red; } 
#box2{ background:green; float:left; color:white; } 
</style> 
</head> 
<body> 
<div id="box1"> 
<div id="bozx2"> 这 是 一 个 浮动 的 元 素 </div> 
</div> 
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15 </body> 
16 </html> 


运行 结果 如 图 7.11 所 示 。 





口 浮动 原理 x Wa 
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图 7.11 默认 宽 展示 效果 


4. 换行 排列 


当 多 个 元 素 设 置 浮动 时 , 它们 会 水 平 排列 , 但 是 如 果 父 容器 放 不 下 这 些 浮动 元 素 时 ， 
会 自动 换行 进行 排列 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 7-11 所 示 。 
【 例 7-11】 换行 排列 。 


灿 <!dqoctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title> 浮 动 原理 </title> 
6 <style> 
7 #boxl{ width:120px; height:150px; background:red; } 
8 #box2{ width:50px; height:50px; background:gray; float:left; } 
9 #box3{ width:80px; height:80px; background:blue; float:left; } 
</style> 
</head> 
<body> 
<div id="box1"> 
<div id="box2"></div> 


<div id="box3"></div> 


> 


</div> 


记 上 
oamomnmwn hh 


</body> 
</html> 


运行 结果 如 图 7.12 所 示 。 
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7.12 ”换行 排列 展示 效果 


7.1.4 clear 属性 


有 时 不 希望 浮动 的 元 素 影响 到 后 面 元 素 的 布局 ， 就 可 以 给 后 面 的 元 素 添加 清除 浮动 
的 操作 。 在 CSS 样式 中 通过 clear 属性 ,来 设置 清除 浮动 的 操作 ,其 有 left、right 和 both 
:个 属性 值 。 


1. left 


left 值 用 来 清除 左 浮动 。 接 下 来 通过 案例 来 演示 clear 属性 值 为 left 的 使 用 ， 具 体 如 
例 7-12 所 示 。 
【 例 7-12】 clear 属性 值 为 left 的 使 用 。 


吕 ovwamouw 必 wmN PP 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:gray; float:left; } 
#box3{ width:80px; height:80px; background:blue; clear:left; } 
</style> 
</head> 
<body> 
<div id="box1"> 
<div id="box2"></div> 
<div id="box3"></div> 


</div> 
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17 </body> 
18 </html> 


运行 结果 如 图 7.13 所 示 。 








PD Re 
拟 已 © filey//D/HTMLexample/chapterd7/7-12.html 








7.13 ”清除 左 浮动 展示 效果 


可 以 看 到 ， 由 于 box3 设置 了 清除 左 浮动 ，box2 元 素 产生 的 浮动 就 不 会 对 box3 产生 
影响 。 这 里 要 注意 ， 当 clear 属性 为 left 值 时 ， 只 能 清除 之 前 元 素 的 左 浮动 ， 而 对 右 浮动 
不 起 作用 。 具 体 如 例 7-13。 

【 例 7-13】 clear 属性 为 left 值 时 ， 对 右 浮动 不 起 作用 。 


1 <!doctype html> 
2 <html> 
3 <head> 
4 <meta charset="utf-8"> 
5 ”<title> 浮 动 原理 </title> 
6 <style> 
区 #boxl{ width:150px; height:150px; background:red; } 
8 #box2{ width:50px; height:50px; background:gray’; float:right; } 
9 #box3{ width:80px; height:80px; background:blue; clear:left; } 
</style> 
1 </head> 
2 <body> 
13 <div id="box1"> 
<div id="box2"></div> 
<div id="box3"></div> 
</div> 
</body> 
</html> 





oo a 0 
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运行 结果 如 图 7.14 所 示 。 








TEST 
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7.14 无 法 清除 右 浮动 展示 效果 


可 以 看 到 ， 当 float 为 right 值 时 ， 无 法 用 clear 为 left 值 清除 浮动 效果 。 那 么 就 需要 
clear 为 right 值 才 行 。 
2. right 


right 值 是 用 来 清除 右 浮动 的 ， 接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-14 所 示 。 
【 例 7-14】 right 值 消除 右 浮动 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浮 动 原理 </title> 
<style> 
#boxl{ width:150px; height:150px; background:red; } 
#box2{ width:50px; height:50px; background:gray; float:right; } 


Oo pr 人 WDNDPp 


#box3{ width:80px; height:80px; background:blue; clear:right; } 
</style> 
</head> 
<body> 


[| 


<div id="box1"> 

14 <div id="box2"></div> 
15 <div id="box3"></div> 
6 </div> 

17 </body> 

</html> 


运行 结果 如 图 7.15 所 示 。 





Co 
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7.15 ”清除 右 浮动 展示 效果 


3. both 


both 值 的 作用 是 左右 浮动 一 起 清除 ， 因 此 一 般 情况 下 ， 都 采用 both 值 ， 这 样 就 不 用 
担心 之 前 元 素 究竟 设置 了 左 浮动 还 是 右 浮动 。 


7.1.5 “清除 能 套 中 浮动 


元 素 骨 套 中 ， 如 果 父 元 素 不 设置 高 度 ， 而 子 元 素 box2 添加 浮动 ， 则 子 元 素 浮动 使 
其 脱离 文档 流 ， 导 致 子 元 素 和 父 元 素 不 在 同一 个 层面 上 ， 这 时 父 元 素 内 没有 任何 内 容 ， 
无 法 撑 开 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 7-15 所 示 。 

【 例 7-15】 父 元 素 不 设置 高 度 ， 子 元 素 添 加 浮动 ， 无 法 撑 开 父 元 素 。 


I <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 恢 套 中 的 清除 浮动 </title> 

6 <style> 

_ #boxl{ width:300px; border:lpx black solid; } 
8 #box2{ width:100px; height:100px; background:red; float:left;} 
9 </style> 

10 </head> 

11 <body> 

12 <div id="box1"> 

3 <div id="box2"></div> 

14 </div> 

15 </body> 

16 </html> 


运行 结果 如 图 7.16 所 示 。 
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图 7.16 子 元 素 浮动 ， 父 元 素 撑 不 开 效果 

图 7.16 中 可 以 看 出 子 元 素 无 法 撑 开 父 元 素 的 容器 。 这 会 影响 到 后 面 元 素 的 布局 ， 想 
要 在 子 元 素 浮动 的 情况 下, 使 父 元 素 保持 原 有 位 置 大 小 , 就 涉及 清除 嵌 套 中 浮动 的 操作 ， 
下 面 将 讲解 在 嵌 套 中 清除 浮动 的 方法 。 

1， 父 元 素 固定 宽 高 

通过 给 父 元 素 设 定 固定 的 高 度 方式 清除 嵌 套 中 浮动 ， 这 种 方式 其 实 是 把 父 元 素 高 度 
固定 ， 进 而 对 容器 大 小 进行 了 限制 。 这 样 对 于 内 容 的 扩展 不 是 很 方便 ， 因 此 这 种 方式 是 
不 建议 使 用 。 在 上 述 案例 的 基础 上 ， 为 父 元 素 固定 宽 高 ， 具 体 CSS 代码 如 下 。 


#boxl{ width:300px; height:100px; border:1px black solid; } 
#box2{ width:100px; height:100px; background:red; float:left; } 


保存 HTML 文件 ， 刷 新 页 面 ， 运 行 结果 如 图 7.17 所 示 。 
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图 7.17 父 元 素 固 定 宽 高 效果 
2， 父 元 素 浮动 
通过 给 父 元 素 设置 浮动 操作 方式 清除 嵌 套 中 浮动 ， 这 种 方式 可 以 保证 子 元 素 与 父 元 
素 处 于 同一 平面 上 ， 父 元 素 可 以 被 撑 开 ， 但 这 种 方式 存在 父 元 素 浮动 会 影响 后 面 元 素 布 


局 的 问题 ， 因 此 也 不 推荐 使 用 。 在 上 述 案例 的 基础 上 ， 为 父 元 素 设置 浮动 ， 具 体 CSS 代 
码 如 下 。 





#box1l{ width:300px; border:1px black solid; float:left; } 
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#box2{ width:100px; height:100px; background:red; float:left; } 

保存 HTML 文件 ， 刷 新 页 面 ， 运 行 结果 同 图 7.17。 

3. 父 元 素 overflow 属性 

通过 将 父 元 素 overflow 属性 值 设置 为 hidden 或 scroll 方式 清除 嵌 套 中 浮动 ， 但 


overflow 会 对 溢出 的 元 素 进行 隐藏 或 添加 滚动 条 ， 因 此 也 是 不 推荐 使 用 的 方式 。 在 上 述 
案例 基础 上 ， 将 父 元 素 overflow 属性 值 设 置 为 hidden， 具 体 CSS 代码 如 下 。 


#boxl{ width:300px; border:lpx black solid; overflow:hidden; } 
#box2{ width:100px; height:100px; background:red; float:left; } 


保存 HIML 文件 ， 刷 新 页 面 ， 运 行 结果 同 图 7.17。 
4. 父 元 素 设 置 display 属性 
通过 将 父 元 素 display 属性 值 设 置 为 inline-block 方式 清除 内 套 中 浮动 ,但 inline-block 


值 会 使 元 素 具 备 块 和 内 联 的 特点 ， 对 布局 有 影响 ， 因 此 也 是 不 推荐 使 用 的 方式 。 在 上 述 
案例 基础 上 ， 将 父 元 素 display 属性 值 设置 为 inline-block， 具 体 CSS 代码 如 下 。 


#box1l{ width:300px; border:lpx black solid; display:inline-block; } 
#box2{ width:100px; height:100px; background:red; float:left; } 


保存 HTML 文件 ， 刷 新 页 面 ， 运 行 结果 同 图 7.17。 

5.， 设置 空 标签 

通过 在 父 元 素 中 添加 一 个 空 标签 清除 嵌 套 中 浮动 ， 利 用 这 个 空 标签 来 撑 开 父 元 素 ， 
具体 CSS 代码 如 下 。 

.Clear{ clear : both; } 


保存 HIML 文件 ， 刷 新 页 面 ， 运 行 结果 同 图 7.17。 

给 空 标签 添加 清除 浮动 操作 ， 使 得 空 标签 保持 在 正常 位 置 上 ， 同 时 空 标签 和 父 元 素 
在 同一 个 层面 上 ， 因 此 父 元 素 被 室 标 签 所 撑 开 。 这 种 方式 非常 巧妙 ， 但 需要 多 添加 一 个 
标签 元 素 ， 也 不 是 很 方便 ， 因 此 不 建议 在 实际 工作 中 使 用 。 


6. after 伪 类 





after 伪 类 方式 是 优化 空 标签 方式 的 一 种 做 法 ， 也 是 目前 最 流行 的 处 理 方式 。 下 面 先 
来 了 解 after 伪 类 的 用 法 。 

它 可 以 通过 CSS 方式 给 HIML 标签 添加 内 容 ， 内 容 会 被 添加 到 HIML 标签 内 的 最 
后 位 置 。 接 下 来 通过 案例 来 演示 after 伪 类 的 使 用 ， 有 具体 如 例 7-16 所 示 。 

【 例 7-16】 after 伪 类 的 使 用 。 


证 <!doctype html> 
4 <html> 
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<head> 
<meta charset="utf-8"> 
<title> 霸 套 中 的 清除 浮动 </title> 
<style> 

#box:after{ content : " 
</style> 
</head> 
<body> 
<div id="box">hello</div> 
</body> 
</html> 


oe A 


运行 结果 如 图 7.18 所 示 。 


中 说 套 中 的 青 除 浮动 x 全 








€ [| | © sile:y//p: /HIMLexample/chapter07/7-16. html 女 | : 








hello_css 





7.18 after 伪 类 展示 效果 


图 7.18 中 可 以 看 出 ,after 伪 类 通过 content 属性 来 添加 内 容 ,并 且 把 内 容 加 到 了 hello 
内 容 的 后 面 。 
通过 after 伪 类 的 方式 在 boxl 中 添加 一 个 空 内 容 ， 相 当 于 添加 一 个 空 标签 ， 默 认 是 


内 联 特 点 ， 因 此 通过 将 display 属性 值 设置 为 block 转化 成 块 的 特点 ， 然 后 就 可 以 通过 清 


除 浮动 的 方式 ， 使 父 元 素 被 撑 开 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 7-17 所 示 。 
【 例 7-17】 通过 after 伪 类 方式 ， 将 父 元 素 撑 开 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 典 套 中 的 清除 浮动 </title> 
<style> 
#boxl{ width:300px; border:lpx black solid; } 
#box2{ width:100px; height:100px; background:red; float:left; } 
.Clear:after{ content : ""; display : block; clear : both; } 
</style> 
</head> 
<body> 
<div id="boxl" class="clear"> 
<div id="box2"></div> 
</div> 
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7.19 after 伪 类 清除 浮动 效果 


与 after 伪 类 类 似 的 还 有 一 个 before 伪 类 ， 它 是 把 内 容 添加 到 hello 内 容 的 前 面 。 接 
Dot before 1 具体 如 例 7-18 所 示 。 
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清除 嵌 套 结构 的 浮动 方法 ，after 是 最 优化 的 一 种 方式 ， 推 荐 使 用 。 
7. BFC 模式 





BFC 是 “Block fomatting context” 的 缩写 ， 即 “ 块 级 格式 化 上 下 文 ” 的 意思 。 当 创 
建 了 BFC 的 元 素 就 会 形成 一 个 独立 的 盒子 。 盒 子 里 的 布局 不 受 外 部 影响 ， 当 然 也 不 会 影 
响 到 外 面 的 元 素 。 下 面 列 举 了 四 个 能 够 触发 BFC 模式 的 属性 ， 具 体 如 下 。 

。 float 的 值 为 left 或 right; 

。 overflow 的 值 为 hidden 或 scroll; 

。 display 的 值 为 inline-block:; 

。 position 的 值 为 absolute 或 fixed。 

position 为 定位 属性 ， 会 在 下 一 节 中 详细 讲解 。 可 以 发 现 ，overflow、display 等 属性 
可 以 清除 浮动 是 因为 它们 不 会 影响 周围 的 布局 ， 而 成 为 独立 的 盒子 。 前 面 章节 中 讲 过 的 
盒子 模型 中 margin 传递 的 问题 ， 也 可 以 通过 设置 BFC 模式 来 解决 。 





7.2 CSS 定 伍 


在 CSS 中 ， 通 过 CSS 定位 (CSS position) 可 以 实现 网 页 元 素 的 精确 定位 。CSS 定 
位 和 CSS 浮动 类 似 ， 也 是 控制 网 页 布局 的 操作 ，CSS 定位 更 加 灵活 ， 可 以 针对 更 多 个 性 
化 的 布局 方案 来 使 用 。 在 网 页 布局 实战 中 ， 灵 活 使 用 这 两 种 布局 方式 ， 能 够 创建 多 种 高 
级 而 精确 的 布局 。 本 节 将 对 元 素 的 定位 属性 及 常用 的 几 种 定位 方式 进行 详细 地 讲解 。 


7.2.1 定位 属性 

制作 网 页 时 ，CSS 可 以 使 用 定位 属性 将 一 个 元 素 精确 地 放 在 页 面 上 指定 位 置 。 元 素 
的 定位 属性 由 定位 模式 和 位 置 属性 两 部 分 构成 。 

1， 定 位 模式 


在 CSS 中，position 属性 用 来 定义 元 素 的 定位 模式 ， 其 常用 的 属性 值 有 四 个 ， 分 别 
表示 不 同 的 定位 模式 ， 如 表 7.1 所 示 。 
表 7.1 position 属性 的 常用 值 


属 性 值 含义 











static | 静态 定位 (默认 定位 方式 ) 
relative | 相对 定位 ， 相 对 于 其 原文 档 流 的 位 置 进行 定位 
absolute | 绝对 定位 ， 相 对 于 其 上 一 个 已 经 定位 的 父 元 素 进行 定位 





fixed 固定 定位 ， 相 对 于 浏览 器 窗口 进行 定位 





表 7.1 中 静态 定位 就 是 默认 的 方式 ， 当 position 属性 值 为 static 时 ， 可 以 将 元 素 定位 
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于 静态 位 置 。 静 态 位 置 就 是 各 个 元 素 在 HTML 文档 流 中 默认 的 位 置 。 

在 默认 状态 下 任何 元 素 都 会 以 静态 定位 来 确定 位 置 。 因 此 ， 当 元 素 未 设置 position 
属性 时 ， 会 遵循 默认 值 显示 为 静态 位 置 。 

2. 位 置 属性 

定位 模式 仅仅 定义 了 元 素 的 定位 方式 ， 而 并 不 能 确定 元 素 的 具体 位 置 。 在 CSS 中 ， 
位 置 属性 用 来 精确 定义 定位 元 素 的 位 置 ， 其 取 值 为 不 同 单位 的 数值 或 百分比 ， 定 位 属性 
包括 top、bottom、left 和 right， 其 具体 含义 如 表 7.2 所 示 。 

表 7.2 ”位置 属性 含义 


























边 偏 移 属 性 含 义 
top 顶部 偏 移 量 
bottom 底部 偏 移 量 
left 左 侧 偏 移 量 
right 右 侧 偏 移 量 





7.2.2 ”相对 定位 


相对 定位 是 元 素 相对 于 它 在 原文 档 流 中 的 位 置 来 进行 定位 ，position 属性 的 取 值 为 
relative。 接 下 来 通过 案例 来 演示 直接 在 box2 上 添加 position 属性 值 ,将 其 设置 为 relative， 
具体 如 例 7-19 所 示 。 

【 例 7-19】 直接 在 box2 上 添加 position 属性 值 ， 将 其 设置 为 relative。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 定位 </title> 

<style> 
#boxl{ width:50px; height:50px; background:red; } 
#box2{ width:50px; height:50px; background:green; 


oO oroDp 


position:relative; } 
#box3{ width:50px; height:50px; background:blue; } 
</style> 
</head> 
<body> 


FF Pb 
Ss WD-=» Oo 


<div id="boxl"></div> 
<div id="box2"></div> 
<div id="box3"></div> 
</body> 


FF 
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18 </html> 


运行 结果 如 图 7.21 所 示 。 





口 Gs 定位 x 《em 
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7.21 添加 相对 定位 展示 效果 


由 图 7.21 可 以 看 出 ， 给 元 素 只 添加 relative 值 ， 对 元 素 本 身 并 没有 任何 影响 ， 只 是 
设置 其 相对 定位 ， 因 此 还 需要 通过 定位 属性 来 改变 元 素 的 位 置 ， 但 它 在 文档 流 中 的 位 置 
仍然 保留 。 具 体 如 例 7-20 所 示 。 

【 例 7-20】 通过 定位 属性 改变 元 素 位 置 ， 使 其 在 文档 流 中 的 位 置 保留 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 定位 </title> 

<style> 
#boxl{ width:50px; height:50px; background:red; } 
#box2{ width:50px; height:50px; background:green; 


[> 


position:relative; left:50px; top:50px; } 
0 #box3{ width:50px; height:50px; background:blue; } 
1 </style> 
2 </head> 
3 <body> 
14 <div id="boxl"></div> 


<div id="box2"></div> 


</body> 
</html> 





I 
6 <xdiv id="box3"></div> 
yi 
8 


运行 结果 如 图 7.22 所 示 。 
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图 7.22 位 置 属性 展示 效果 


元 素 在 设置 left 值 50px 和 top 值 50px 条 件 下 ， 可 以 移动 到 指定 的 位 置 。 相 对 定位 
是 相对 于 元 素 本 身 的 左上 角 进 行 偏 移 操作 的 。 相 对 定位 的 偏 移 并 没有 影响 到 其 他 元 素 的 
位 置 。 

需要 注意 一 点 ， 定 位 模式 和 位 置 属性 是 配合 在 一 起 使 用 的 ， 如 果 只 定义 一 种 ， 则 对 
元 素 不 起 任何 作用 。 


7.2.3 绝对 定位 


绝对 定位 是 元 素 相对 于 已 经 定位 〈 相 对 、 绝 对 或 固定 定位 ) 的 父 元 素 进行 定位 。 若 
所 有 父 元 素 都 没有 定位 , 则 依据 浏览 器 窗口 左上 角 进 行 定位 。 当 position 属性 值 为 absolute 
时 ， 可 以 将 元 素 的 定位 模式 设置 为 绝对 定位 。 接 下 来 通过 案例 来 演示 直接 将 box2 元 素 的 
position 属性 值 设 置 为 absolute， 具 体 如 例 7-21 所 示 。 

【 例 7-21】 直接 将 box2 元 素 的 position 属性 值 设 置 为 absolute。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 定位 </title> 
<style> 
#boxl{ width:50px; height:50px; background:red; } 
#box2{ width:50px; height:50px; background:green; 
position:absolute; } 
#box3{ width:50px; height:50px; background:blue; } 
</style> 
</head> 
<body> 
<div id="boxl"></div> 
<div id="box2"></div> 
<div id="box3"></div> 


Conor 
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17 </body> 
18 </html> 


运行 结果 如 图 7.23 所 示 。 





Co file:///D:/HIMLexample/chapter07/7-21.html 丛 








了 一 绿色 方块 释 加 到 蓝 色 方块 上 面 


7.23 ”相对 定位 展示 效果 





相对 定位 展示 效果 如 图 7.23 所 示 ，box2 有 加 到 box3 的 上 面 ， 这 说 明 绝对 定位 会 脱 
离 文档 流 。 例 7-21 中 box2 没有 父 元 素 ， 因 此 其 定位 将 根据 浏览 器 窗口 左上 角 进 行 偏 移 。 
接 下 来 将 介绍 绝对 定位 的 另外 两 个 特点 。 

(1) 与 浮动 类 似 ， 块 元 素 添 加 绝对 定位 后 ， 默 认 宽 与 内 容 的 宽 相 同 。 接 下 来 通过 案 
例 来 演示 ， 上 基体 如 例 7-22 所 示 。 

【 例 7-22】 块 元 素 添加 绝对 定位 后 ， 默 认 宽 与 内 容 的 宽 相 同 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 定位 </title> 
<style> 

div{ background:red; position:absolute;} 
</style> 
</head> 
<body> 
<div> 这 是 一 个 标签 </div> 
</body> 
</html> 


运行 结果 如 图 7.24 所 示 。 
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这 是 一 个 标签 
7.24 ”绝对 定位 默认 宽 展示 效果 


Css 浮动 与 定位 


pi 


(2) 贬 套 结构 中 的 绝对 定位 。 当 父 元 素 或 祖先 元 素 中 有 相对 定位 或 绝对 定位 时 ， 子 
元 素 的 绝对 定位 将 相对 于 父 元 素 或 祖先 元 素 进行 定位 。 当 父 元 素 或 祖先 元 素 都 没有 定位 


属性 时 ， 
所 示 。 





子 元 素 将 相对 于 浏览 器 窗口 进行 偏 移 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-23 


【 例 7-23】 堪 套 结构 中 的 绝对 定位 。 


Dowauamc wm 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS 定位 </title> 
<style> 
#boxl{ width:50px; height:50px; background:red; 
margin-left:50px; position:relative; } 
#box2{ width:50px; height:50px; background:green; 
position:absolute; top:50px; left:50px; } 
</style> 
</head> 
<body> 
<div id="box1"> 
<div id="box2"></div> 
</div> 
</body> 
</html> 


了 结果 如 图 7.25 所 示 。 





口 cs 位 ~ 
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图 7.25 赃 套 结构 中 的 绝对 定位 


固定 定位 


固定 定位 通过 将 position 属性 值 设置 为 fxed 来 实现 。 固 定 定位 与 绝对 定位 类 似 ， 也 





是 脱离 文档 流 。 二 者 的 不 同 点 是 当 元 素 的 position 属性 设置 为 fxed 时 ， 元 素 将 被 固定 ， 
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即 不 会 随 着 滚动 条 的 拖 动 而 改变 位 置 。 在 视野 中 ， 固 定 定位 的 元 素 的 位 置 不 会 改变 。 接 
下 来 通过 案例 来 演示 ， 具 体 如 例 7-24 所 示 。 
【 例 7-24】 固定 定位 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 定位 </title> 

<style> 
body{ height:1000px;} 
#boxl{ width:50px; height:50px; background:red; } 
#box2{ width:50px; height:50px; background:green; 








CornoONp 


10 position:fixed; top:50px; left:50px; } 

于 #box3{ width:50pxy height:50px; background:blue; } 
12 </style> 

13 </head> 

4 <body> 

5 <div id="boxl"></div> 

16 <div id="box2"></div> 

7 <xdiv id="box3"></div> 

18 </body> 

9 </html> 


运行 结果 如 图 7.26 所 示 。 





口 css 定 位 x We 
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图 7.26 固定 定位 展示 效果 





固定 定位 与 绝对 定位 还 有 一 个 不 同 点 是 固定 定位 永远 都 是 相对 浏览 器 窗口 左上 角 
进行 偏 移 。 网 页 中 的 回 到 顶部 按钮 就 是 用 固定 定位 实现 的 。 接 下 来 通过 案例 来 演示 ， 具 
体 如 例 7-25 所 示 。 

【 例 7-25】 回 到 顶部 按钮 。 


1 <!doctype html> 
骂 <html> 
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运行 结果 如 图 7.27 所 示 。 


口 Gs 定位 x 


€ CC |© File:///D:/HMLexample/chapter07/7-25.html 人 站 | 外 





图 7.27 回 到 项 部 展示 效果 


7.2.5 定位 的 层级 


当 多 个 元 素 添加 定位 操作 时 , 可 能 会 出 现 冯 加 情况 , 即 在 默认 的 情况 下 输出 的 HTML 
结构 层级 就 会 越 高 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-26 所 示 。 
【 例 7-26】 HTML 结构 层级 。 
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10 position:absolute; left:25px; top:25px; } 
11 </style> 

12 </head> 

13 <body> 

14 <div id="boxl"></div> 

15 <div id="box2"></div> 

16 </body> 

17 </html> 


运行 结果 如 图 7.28 所 示 。 


口 GG 定位 








4《 @ | OO file:///D:/HTMLexample/chapter07/7-26.html 从 | : 











7.28 ”定位 默认 从 加 顺序 


定位 层级 与 定位 属性 配套 使 用 ， 用 于 调节 层级 的 z-index 属性 ， 其 属性 值 用 数字 表 
示 ， 数 字 越 大 ， 层 级 越 高 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 7-27 所 示 。 
【 例 7-27】 定位 层级 与 定位 属性 配套 使 用 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 定位 </title> 

<style> 

#boxl{ width:50px; height:50px; background:red; 
position:absolute; left:0; top:0; z-index:2; } 


Dowamnmumm wm 


#box2{ width:50pxy height:50px; background:green; 
position:absolute; left:25px; top:25px; z-index:1; } 

</style> 

</head> 

13 <body> 

14 <div id="boxl"></div> 

15 <div id="box2"></div> 

16 </body> 

17 </html> 


H 
一 


D 


运行 结果 如 图 7.29 所 示 。 
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7.29 ”z-index 属性 展示 效果 


7.3 本 章 小 结 


本 章 首先 介绍 了 CSS 中 元 素 的 浮动 、 浮 动 的 方向 与 其 所 呈现 的 效果 ， 以 及 清除 浮动 
的 方法 ， 然 后 讲解 了 CSS 中 元 素 的 定位 及 几 种 常见 的 定位 模式 。 通 过 本 章 的 学 习 ， 能 够 
掌握 浮动 的 使 用 方法 和 以 定位 的 方式 对 网 页 进行 布局 的 操作 ， 以 及 能 够 掌握 清除 浮动 的 
儿 种 常用 方法 ， 为 后 续 学 习 网 页 布局 相关 知识 打下 基础 。 


74 司 ”村 
1. 填空 是 
(1) 利用 CSS 样式 中 的 ”可 以 使 元 素 在 HIML 结构 中 的 顺序 和 所 展现 
的 顺序 不 一 致 。 
(2) clear 属 性 的 取 值 上 、.， 和 三 种 。 
(3) 用 来 定义 元 素 的 定位 模式 。 
(4) 定位 模式 分 为 、 相 对 定位 、 绝 对 定位 和 _ 四 种 。 
(5) 用 属性 ， 来 调整 重合 定位 元 素 的 层级 。 
2， 选 择 是 
(1) 下 面 关 于 float 的 描述 ， 错 误 的 是 ( 
A. float:left B. float:center 
C. float:nght D. float:none 


(2) 关于 z-index 属性 ， 叙 述 正确 的 一 项 是 〈 
A. 此 属性 必须 与 position 属性 一 起 使 用 才能 起 作用 ， 此 时 position 取 任 何 值 都 
可 以 
B. 此 值 越 大 ， 层 的 顺序 越 往 下 
C. 一 般 情况 下 ， 后 添加 的 元 素 ， 其 z-index 值 越 小 
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D. 上 面 的 层 即使 没有 任何 内 容 也 会 挡住 下 面 的 层 ， 使 下 面 的 层 无 法 显示 
(3) 下 面 不 能 用 于 清除 嵌 套 中 的 浮动 的 一 项 是 《〈 把 

A. 将 父 元 素 中 的 overflow 属性 设置 为 hidden 

B. 在 父 元素 中 添加 浮动 

C. after 伪 类 

D. 将 父 元 素 中 display 属性 设置 为 block 
(4) 下 面 哪 项 不 能 被 设置 为 float 属性 值 。( ) 


A. none B. left 
C. top D. right 
(5) 当 z-index 值 为 下 列 值 时 ， 哪 个 层级 最 高 。( ) 
| B. 2 
© 1 D. 4 
3， 思 考题 


(1) 请 简 述 哪 种 清除 浮动 是 最 优 的 方案 。 
(2) 请 简 述 绝对 定位 与 相对 定位 的 区 别 。 
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HTML&CSS 扩展 


本 章 学 习 目 标 

。 了 解 HTML 标签 规范 ; 

。 了 解 HTML 扩展 标签 ; 

。 掌握 CSS 扩展 样式 。 

通过 前 面 儿童 的 学 习 ， 能 够 掌握 HTML 和 CSS 的 基本 原理 和 使 用 技巧 ， 但 HTML 
在 书写 时 需要 注意 一 些 规范 ， 以 及 在 实际 制作 网 页 的 过 程 中 ， 有 时 需要 添加 更 多 的 标签 
和 样式 。 本 章 将 讲述 标签 规范 ， 及 扩展 HTML 标签 和 CSS 样式 的 内 容 ， 以 满足 制作 网 
页 的 需要 。 


8.1 标签 规范 


在 书写 HTML 结构 时 ， 需 要 使 用 符合 W3C 标准 规定 的 标签 规范 。 使 用 不 正确 的 
HTML 结构 ， 将 可 能 会 导致 一 些 错 误 。 下 面 总 结 了 一 些 常 见 的 标签 规范 。 


8.1.1 内 套 问题 

HTML 标签 规范 对 结构 堪 套 的 方式 有 着 较为 严格 的 要 求 ， 其 要 求 分 为 固定 嵌 套 规则 
和 限制 棋 套 规则 两 类 。 下 面 将 详细 介绍 这 两 种 霸 套 规则 。 

1， 国 定 嵌 套 规则 


有 些 标 签 是 固定 的 嵌 套 规则 ， 有 具体 如 下 所 述 。 
(1) <ul>、<oP> 标 签 只 能 嵌 套 <li> 标 签 ， 不 可 戏 套 其 他 标签 ， 错 误 示例 代码 如 下 所 示 。 





<ul> 
<div></div> 
</ul> 
<ol> 
<p></p> 
</ol1> 
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上 述 代 码 中 <ul> 标 签 嵌 套 了 <div> 标 签 ，<ol> 嵌 套 了 <p> 标 签 的 操作 不 符合 固定 嵌 套 
规则 ， 这 是 一 种 错误 的 嵌 套 方式 。 

(2) <d 记 > 标签 只 能 嵌 套 <dt>、<dd> 标 签 ， 不 允许 嵌 套 其 他 标签 ， 错 误 示 例 代码 如 下 
所 示 。 





上 述 代 码 中 <d 户 标签 嵌 套 了 <h2> 和 <div> 标 签 ， 这 是 错误 的 嵌 套 方式 。 
(3) <table> 标 签 只 能 嵌 套 <tr>、<caption>、<thead>、<tbody>、<tfoof> 标 签 ， 不 可 
嵌 套 其 他 标签 。 示 例 代码 如 下 。 





代码 中 <table> 标 签 中 嵌 套 了 <div> 和 <p> 标 签 ， 是 错误 的 嵌 套 方式 。 
2， 限 制 嵌 套 规则 


有 些 标签 在 进行 互相 嵌 套 时 ， 是 有 限制 规则 的 ， 具 体 如 下 。 
(1) <p>、<dP>、<hl>.…<h6> 标 签 不 允许 嵌 套 任何 块 标签 。 示 例 代码 如 下 。 





代码 中 <p> 标 签 、<dP> 标 签 和 <h1l> 标 签 都 嵌 套 了 <div> 标 签 ， 这 些 都 是 错误 的 嵌 套 
方式 。 
(2) <a> 标 签 不 允许 嵌 套 <a> 标 签 。 示 例 代 码 如 下 。 





代码 中 <a> 标 签 嵌 套 了 <a> 标 签 ， 这 种 嵌 套 方式 是 不 正确 的 。 
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(3) 抉 标签 可 以 嵌 套 内 联 标签 ， 但 是 内 联 标签 不 能 嵌 套 块 标签 ， 示 例 代 码 如 下 。 





代码 中 <span> 和 <strong> 都 是 有 内 联 特点 的 标签 ， 嵌 套 了 <div> 和 <ul> 有 块 标签 特点 
的 标签 。 内 联 标签 不 能 嵌 套 块 标签 ， 因 此 这 种 堪 套 方式 是 错误 的 。 

下 面 来 看 一 个 实际 的 应 用 场景 ， 给 一 段 文字 或 图 片 加 链接 的 操作 很 简单 ， 那 么 如 何 
给 一 个 区 域 加 链接 呢 ? 假设 想 要 给 boxl 加 一 个 <a> 链 接 ， 接 下 来 通过 案例 来 演示 ， 具 体 
如 例 8-1 所 示 。 

【 例 8-1】 为 一 个 区 域 加 链接 。 






例 8-1 不 能 成 功 地 给 一 个 区 域 加 连接 ， 因 为 <a> 标 签 属于 内 联 标签 ， 嵌 套 了 <div> 块 
标签 ， 这 样 做 法 是 不 正确 的 。 那 么 该 如 何 实现 呢 ? 修改 8-1 代码 如 下 。 
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9 </style> 

10 </head> 

11 <body> 

12 <div id="boxl"> 

13 <a href="#"></a> 
14 </div> 

15 </body> 

16 </html> 


首先 需要 一 个 正确 的 嵌 套 结构 , 然后 通过 将 display 值 设置 为 block, 来 把 <a> 标 签 转 
让 成 块 标签 ， 让 其 支持 宽 高 属性 ， 即 可 以 实现 给 一 个 区 域 加 链接 的 效果 。 


8.1.2 格式 问题 


在 HIML 标签 规范 中 ,对 标签 格式 也 有 着 很 重要 的 要 求 。 下 面 总 结 了 五 条 重要 的 格 
式 问 题 。 

(1) 必须 添加 文档 头 信息 ， 即 <!ldoctype html>， 它 是 在 告知 浏览 器 浏览 网 页 时 ， 所 
使 用 的 HTML 规范 。 如 果 没有 头 信息 ， 可 能 会 产生 一 些 错 误 

(2) 规范 要 求 所 有 HTML 标签 和 属性 都 必须 小 写 (大 写 不 会 产生 错误 )。 

(3) 规范 要 求 所 有 属性 都 必须 使 用 双 引 号 ， 虽 然 单 引 号 也 不 会 报错 。 示 例 代 码 如 下 。 


<div id="elem" class="box" title=" 块 "></div> 
(4) 规范 要 求 所 有 的 单 标 签 无 须 使 用 斜 杠 结束 。 示 例 代码 如 下 。 


<!-- 第 一 段 内 容 --> 
<input type="text"> 
<img src="gf.png"> 
<!-- 第 二 段 内 容 --> 
<input type="text" /> 
<img src="qf.png" /> 


第 一 段 内 容 是 正确 的 写法 ， 第 二 段 内 容 是 老式 的 写法 (W3C 标准 不 推荐 )。 
(5) 规范 要 求 所 有 的 双 标签 必须 进行 闭合 处 理 。 


<!-- 第 一 段 内 容 --> 
<div></div> 
<p></p> 

<!-- 第 二 段 内 容 --> 
<div> 


<p> 


第 一 段 内 容 是 正确 的 双 标签 写法 ， 第 二 段 内 容 是 错误 的 ， 因 为 双 标 签 没有 闭合 
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8.2 HTML 扩展 


前 面 章节 中 已经 介绍 过 常用 的 HTML 标签 ， 如 : 标题 、 段 落 、 列 表 等 。 当 然 HTML 
标签 还 有 很 多 ， 下 面 再 来 扩展 学 习 一 些 HIML 标签 ， 这 些 标签 主要 以 了 解 为 主 。 


8.2.1 <link> 标 签 


<link> 标 签 属于 链接 标签 ， 前 面 章节 中 已 经 介绍 过 它 可 以 引入 CSS 外 部 样式 文件 。 
在 <head> 标 签 中 通过 以 下 方式 进行 设置 ， 示 例 代码 如 下 。 

<link rel="stylesheet" type="text/css" href="index.css"> 

rel 属性 用 来 规定 当前 文档 与 被 链接 文档 之 间 的 关系 。type 属性 规定 被 链接 文档 
MIME 类 型 。MIME (Multipurpose Intemet Mail Extensions) 是 描述 消息 内 容 类 型 的 因 特 
网 标准 ， 即 当前 文件 类 型 。text'css 表示 文件 是 css 类 型 。href 属性 用 来 规定 链接 文件 
地 址 。 

<link> 标 签 还 有 其 他 用 法 。 下 面 依次 进行 列举 。 

(1) media 属性 可 以 针对 不 同 的 媒介 类 型 进行 样式 设 定 ， 如 表 8.1 所 示 。 

表 8.1 media 属性 取 值 


值 描 述 
screen 计算 机 屏幕 (默认 ) 
tty 电 传 打字 机 以 及 类 似 的 使 用 等 宽 字符 网 格 的 媒介 
tv 电视 机 类 型 设备 〈 低 分 辨 率 、 有 限 的 滚屏 能 力 ) 
projection 放映 机 
handheld 手持 设备 小 屏幕 、 有 限 带 宽 ) 
print 打印 预览 模式 /打印 页 面 
braille 盲人 点 字 法 反馈 设备 
aural 语音 合成 器 
all 适用 于 所 有 设备 


(2) 设置 网 站 的 缩 略 标志 。 

有 些 网 站 在 标题 前 面 会 出 现 一 个 图 标 ， 这 个 图 标 就 是 网 站 的 缩 略 标识 ， 用 于 区 分 不 
同 的 网 站 来 源 。 通 过 <link> 标 签 可 实现 添加 图 标 功能 。 接 下 来 通过 案例 来 演示 网 站 缩 略 
标识 的 展示 效果 ， 具 体 如 例 8-2 所 示 。 

【 例 8-2】 网 站 缩 略 标识 的 展示 效果 。 

1 <!doctype html> 


2 <html> 
3 <head> 
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4 <link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 
5 type="/image/x-icon"> 
6 <meta charset="utf-8"> 
7 <title>HTML 扩 展 </title> 
8 </head> 

9 <body> 

10 </body> 

11 </hial> 


运行 结果 如 图 8.1 所 示 。 





© | © Fle: /nD: /HEMExarple/chipter08/ 8-2, html 











8.1 ”网 站 缩 略 标识 展示 效果 


在 例 8-2 中 ， 将 <link> 标 签 rel 属性 设置 成 icon 值 ， 将 type 属性 设置 成 /image/x-icon 
值 。 注 意 : href 属性 链接 地 址 中 的 图 标 命 名 与 格式 必须 是 favicon.ico 形式 。 

(3) 蕴 果 设备 的 私有 设置 。 

苹果 为 iOS 设备 配备 了 apple-touch-icon 私有 属性 ， 该 属性 是 用 来 在 iPhone 和 iPad 
上 创建 快捷 键 时 使 用 。 在 HIML 文档 头 部 中 添加 <link> 标 签 可 以 将 网 站 的 快捷 按钮 添加 
到 主屏 幕 上 , 方便 用 户 以 后 访问 。 实 现 方法 是 在 HTML 文档 的 <head> 标 签 加 入 以 下 示例 
代码 。 


<link rel="apple-touch-icon" href="1ogo.png"> 


apple-touch-icon 标签 支持 sizes 属性 ， 可 以 用 来 放置 不 同 对 应 的 设备 。 
8.2.2 ”<meta> 标 签 


<meta> 元 素 可 以 提供 与 页 面 有 关 的 元 信息 (meta-information)， 如 针对 搜索 引擎 和 
更 新 频 度 的 描述 和 关键 词 。 在 前 面 的 章节 中 介绍 过 它 可 以 设置 文档 的 编码 方式 ， 同 样 需 
要 在 <head> 标 签 中 通过 以 下 方式 进行 设置 ， 示 例如 下 。 


<meta charset="utf-8"> 


除了 可 以 设置 文档 的 编码 方式 外 ， 还 可 以 设置 其 他 的 元 信息 方式 。 下 面 进行 依次 
列举 。 

(1) 设置 网 站 的 关键 词 和 内 容 描 述 。 

通过 <meta> 设 置 网 站 的 关键 词 和 内 容 描述 ， 可 以 让 搜索 引擎 了 解 当前 网 站 的 关键 词 
和 网 站 的 主要 内 容 ， 有 利于 SEO 搜索 引擎 优化 ， 示 例如 下 。 
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<meta name="keywords" content="HTML5,UI, PHP"> 

<meta name="description" content=" 中 国 IT 职业 教育 领先 品牌 ， 专 注 HTML5 培训 "> 

(2) 设置 网 站 的 作者 和 版 权 信 息 。 

可 以 通过 <meta> 设 置 网 站 的 作者 和 版 权 信 息 ， 示 例如 下 。 

<meta name="author" content=" 小 千 "> 

<meta name="copyright" content="2011-2017 千 锋 互联 "> 

(3) 是 否 允 许 搜索 引擎 索引 。 

可 以 通过 <meta> 设 置 是 否 允 许 搜索 引擎 索引 ， 示 例如 下 。 

<meta name="robots" content="index, follow"> 

content 中 的 值 决 定 了 人 允许 其 抓 取 的 类 型 ， 必 须 同时 包含 是 否 允 许 索 引 (index) 和 是 

和 否 跟 踪 链 接 〈folow) 两 个 值 ， 其 共有 四 个 参数 可 选 ， 组 成 四 个 组 合 ， 如 表 8.2 所 示 。 

表 8-2 ”content 取 值 不 同 组 合 


允许 抓 取 本 页 和 跟踪 链接 

允许 抓 取 本 页 ， 但 进 制 跟踪 链接 
禁止 抓 取 本 页 ， 但 允许 跟踪 链接 
禁止 抓 取 本 页 ， 同 时 禁止 跟踪 本 页 中 的 链接 


index,follow 
index,nofollow 


noindex,follow 





noindex,nofollow 
此 外 ，index，follow 可 以 写成 al， 示例 如下。 
<meta name="robots" content="all"> 
noindex，nofollow 可 以 写成 none， 示 例如 下 。 


<meta name="robots" content="none"> 
8.2.3 <area> 标 签 


在 网 页 中 ， 添 加 链接 一 般 都 是 在 文字 或 矩形 区 域 中 添加 。 对 于 在 一 些 特 殊 形状 区 域 
(如 : 多 边 形 ， 圆 形 等 ) 添加 链接 ， 则 需要 用 到 <area> 标 签 。<area> 标 签 的 作用 是 可 单 击 
区 域 的 图 像 映射 。 接 下 来 将 分 步骤 讲解 如 何 为 图 片上 某 个 多 边 形 添 加 链接 。 通 过 DW 工 
具 可 以 很 方便 地 操作 <area> 标 签 。 

(1) 打开 DW 工具 ， 创 建 HTML 文档 ， 在 <body> 标 签 中 添加 代码 引入 图 片 ， 添 加 
代码 如 下 。 


<img src="H5.jpg"> 


将 文档 保存 为 8-3.html。 
(2) 将 DW 工具 调整 到 设计 视图 。DW 工具 设计 视图 展示 效果 如 图 8.2 所 示 。 
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图 8.2 DW 工具 设计 视图 展示 效果 


(3) 单 击 图 片 ， 在 工具 下 方 可 看 见地 图 操作 。DW 工具 地 图 展示 效果 如 图 8.3 所 示 。 
主人 和 住 
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图 8.3 DW 工具 地 图 展示 效果 








(4) 单 击 多 边 形 图 标 ， 在 图 片上 画 出 区 域 。 多 边 形 操 作 图 片 展示 效果 如 图 8.4 所 示 。 
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8.4 多 边 形 操作 图 片 展示 效果 


这 样 就 完成 了 用 <area> 标 签 添加 链接 的 操作 ， 下 面 看 下 转化 后 的 <area> 标 签 代码 。 


<body> 
<img src="H5.png" usemap="#Map"> 


<area 3hape="poly” coords=—"13373171718.50" href=°#°"> 


1 

> 

有 <map name="Map"> 

4 

5 <area shape="poly" coords="132,32" href="#"> 
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6 <area shape="poly" coords="133,33,178, 59, 179,111, 133, 139, 86, 110, 86, 58" 
FEE 
他 </map> 
8 </body> 


还 可 以 给 多 边 形 区 域 添加 单 击 链接 ， 当 在 浏览 器 中 预览 图 片 时 ， 可 以 只 单 击 多 边 形 
区 域 来 实现 链接 跳 转 。 





8.2.4 <pre> 标 签 


<pre> 标 签 的 作用 是 定义 预 格式 化 的 文本 。 在 pre 元 素 中 ， 文 本 通常 会 保留 空格 和 换 
行 符 。<pre> 标 签 常用 来 表示 计算 机 的 源 代 码 。 接 下 来 通过 案例 来 演示 <pre> 标 签 展示 效 
果 ， 具 体 如 例 8-4 所 示 。 

【 例 8-4】 <pre> 标 签 展示 效果 。 


<!doctype html> 

<html> 

<head> 

<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 
type="/image/x-icon"> 

<meta charset="utf-8"> 

<title>HTML 扩 展 </title> 

</head> 

<body> 

10 <pre> 

mg 

i &1lt; &liggt; 列 表 第 一 项 &lt; /&liggt; 

13 &lt; &liggt; 列 表 第 二 项 glt; /&liggt; 

a &1t; &1iggt; 列表 第 三 项 &lt;/&liggt; 

15 g&lt;/gulggt; 

16 </pre> 

17 </body> 

18 </html> 


运行 结果 如 图 8.5 所 示 。 


CooDpp 
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图 8.5 ” <pre> 标签 展示 效果 
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常见 的 浏览 程序 源 代码 的 效果 ， 都 是 通过 <pre> 标 签 来 实现 的 。 


8:2.5 


<iframe> 标 签 


<iframe> 标 签 可 以 将 其 他 网 页 内 容 添 加 到 自己 当前 的 页 面 中 ， 形 成 页 面 嵌 套 页 面 的 
效果 。 其 语法 格式 如 下 。 

<iframe src="" width="" height=""> 

其 中 , src 属性 用 来 链接 要 嵌 套 页 面 的 地 址 , width、height 属性 可 以 设 定 容器 的 大 小 。 


接 下 来 通过 案例 来 演示 <iframe> 标 签 展示 效果 ， 有 具体 如 例 8-5 所 示 。 
【 例 8-5】 <iframe> 标 签 展示 效果 。 


oa DNpr 


运行 


<!doctype html> 

<html> 

<head> 

<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 
type="/image/x-icon"> 

<meta charset="utf-8"> 

<title>HTML 扩 展 </title> 

</head> 

<body> 

<iframe src="http://www.qfedu.com/" width="600" height="200"> 

</iframe> 

</body> 

</html> 


结果 如 图 8.6 所 示 。 
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图 8.6” ”<iframe> 标 签 展示 效果 


从 图 8.6 可 以 看 出 ， 千 锋 的 官网 被 添加 到 当前 网 页 ， 默 认 会 显示 <iframe> 标 签 的 边 
框 和 滚动 条 ， 通 过 将 frameborder 属性 设置 为 0， 可 以 取消 边框 样式 ; 将 scrolling 属性 设 
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置 为 no 值 ， 可 以 取消 滚动 条 。 具 体 如 例 8-6 所 示 。 
【 例 8-6】 取消 边框 样式 和 滚动 条 。 


<!doctype html> 

<html> 

<head> 

<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 
type="/image/x-icon"> 

<meta charset="utf-8"> 

<title>HTML 扩展 </title> 

</head> 

<body> 

10 <iframe src="http://www.qfedu.com/" width="600" height="200" 

生计 frameborder="0" scrolling="no"></iframe> 

12 </body> 

13 </html> 


运行 结果 如 图 8.7 所 示 。 


OooproNDp 











El 


/WW QFEDU COM Es | 


还 程 培训 禾 学 保 扩 


图 8.7 ”<iframe> 标 签 展示 效果 


8.2.6 <embed> 标 签 


<embed> 标 签 用 来 在 网 页 中 添加 音频 和 视频 文件 。 在 HIMLS 中 专门 提供 了 针对 音 
频 和 视频 的 添加 方式 ， 这 里 不 进行 详细 讲解 。 接 下 来 通过 案例 来 演示 通过 <embed> 标 签 
的 方式 设置 一 个 flash 视频 文件 ， 具 体 如 例 8-7 所 示 。 

【 例 8-7】 通过 <embed> 标 签 的 方式 设置 一 个 Hash 视频 文件 。 


1 <!doctype html> 
芝 <html> 
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<head> 

4 <link rel="icon" href="http://www.mobiletrain.org/favicon.ico™ 

3 type="/image/x-icon"> 

6 <meta charset="utf-8"> 

7 <title>HTML 扩 展 </title> 

8 </head> 

9 <body> 

10 <embedtype="application/x-shockwave-flash" width="420" height="240" 
TL src=http://player.youku.com/player .php/sid/XNDM2NTc1NjU2/v.swf 
2 allowfullscreen="true" quality="high" title="Adobe Flash Player"> 
13 </embed> 

14 </body> 

15 </html> 


运行 结果 如 图 8.8 所 示 。 
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图 8.8” <embed> 标 签 展示 效果 


8.3 CSS 扩展 


前 面 几 童 已 经 介绍 了 CSS 的 基本 原理 和 使 用 功 技巧 ， 但 CSS 还 有 一 些 在 实际 项 目 
中 能 实现 特殊 效果 的 高 级 技巧 ， 如 CSS 雪 斤 、 最 大 、 最 小 宽 高 、 添 加 省 略 号 和 CSS 表 
格 等 ， 下 面 将 介绍 几 种 CSS 高 级 技巧 。 
8.3.1 CSS 雪 怕 


CSS 雪碧 ( 即 CSS Sprite)， 也 称 CSS 精灵 ， 是 一 种 CSS 图 像 合并 技术 。 该 方法 是 
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将 小 图 标 和 背景 图 像 合并 到 一 张 图 片上 , 然后 利用 CSS 的 背景 定位 来 显示 需要 显示 的 图 
片 部 分 。 接 下 来 先 通过 案例 来 演示 背景 定位 的 操作 方式 ， 具 体 如 例 8-8 所 示 。 
【 例 8-8】 背景 定位 的 操作 方式 。 


<!doctype html> 
<html> 
<head> 
<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 
type="/image/x-icon"> 
<meta charset="utf-8"> 
<title>CSS 扩展 </title> 
<style> 
#box{ width:400px; height:200px; border:1px black solid; 
background :url (qianfeng.jpg) no-repeat; 


OIG Ww 


F 
-oo 


background-position : 50px 30px; } 
</style> 
</head> 
<body> 
<div id="box"></div> 
</body> 
</html> 
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图 8.9 背景 定位 展示 效果 


在 默认 情况 下 ， 背 景 定 位 的 零点 与 容器 的 左上 角 对 齐 。 当 设置 background-position 
属性 值 为 30px 和 50px 时 ， 会 相对 于 容器 的 左上 角 向 右 偏 移 30px 和 向 下 偏 移 50px; 当 
取 负 值 时 背景 图 像 会 向 左 和 向 上 偏 移 。 另 外 例 8-8 中 容器 尺寸 大 于 背景 图 像 尺 寸 ， 如 果 
容器 尺寸 小 于 背景 图 像 尺寸 ,会 怎样 显示 呢 ? 接 下 来 通过 案例 来 演示 背景 定位 展示 效果 ， 
具体 如 例 8-9 所 示 。 
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【 例 8-9】 背景 定位 展示 效果 。 


<!doctype html> 

<html> 

<head> 

<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 

type="/image/x-icon"> 

<meta charset="utf-8"> 

<title>CSS 扩 展 </title> 

<style> 

#box{ width:100px; height:50px; border:1lpx black solid; 

background :url (qianfeng.jpg) no-repeat; 
background-position : -50px -30px; } 

</style> 

</head> 

<body> 

<div id="box"></div> 

</body> 

</html> 


运行 结果 如 图 8.10 所 示 。 
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8.10 ”背景 定位 展示 效果 


图 8.10 中 可 以 看 出 , 可 以 将 背景 定位 设置 为 负 值 , 从 而 使 背景 图 像 向 左 和 向 上 偏 移 ， 
从 而 在 容器 中 显示 部 分 图 像 。 因 此 ， 可 以 利用 这 一 点 来 实现 CSS 雪 正 技术 。 

CSS 雪 丰 技术 是 把 多 张 背景 图 像 合成 到 一 张 背景 图 像 上 ， 通 过 背景 定位 的 负 值 在 容 
器 中 显示 部 分 图 像 。 接 下 来 通过 案例 来 演示 CSS 雪碧 图 的 使 用 ， 具 体 如 例 8-10 所 示 。 

【 例 8-10】 CSS 雪碧 图 的 使 用 。 


1 <!doctype html> 

2 <html> 

<head> 

4 <link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 
三 type="/image/x-icon"> 

6 <meta charset="utf-8"> 

7 <title>CSsSs 扩 展 </title> 

8 <style> 

9 li{ list-style:none; float:left; width:105px; height:120px; 
10 background:url (class.jpg) no-repeat; } 

11 -bgl{ background-position:0px Opx; } 


bs -bg2{ background-position:-108px 0px; } 
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13 -bg3{ background-position:5px -120px; } 
14 -bg4{ background-position:-105px -120px;} 


15 </style> 

16 </head> 

17 <body> 

8 <ul> 

19 <1li class="bg1l"></1i> 
20 <li class="bg2"></1i> 
21 <li class="bg3"></1i> 
2 <1li class="bg4"></1i> 
230 </ul> 

24 </body> 

25 </html> 


运行 结果 如 图 8.11 所 示 。 
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8.11 添加 相对 定位 展示 效果 


使 用 CSS 雪碧 技术 处 理 图 像 的 方式 比分 开 处 理 背 景 图 像 的 方式 更 加 方便 , 最 重要 的 
是 CSS 雪 怕 技术 具有 性 能 更 好 、 质 量 更 小 的 优势 ， 同 时 还 能 减少 网 络 请 求 时 间 ， 即 一 张 
图 要 比 多 张 图 请 求 次 数 少 ， 从 而 请 求 时 间 减 少 。CSS 雪碧 技术 是 一 种 性 能 优化 的 方案 ， 
在 开发 过 程 中 可 以 针对 背景 图 标 进行 CSS 雪碧 图 操作 。 





8.3.2 最 大 、 最 小 宽 高 


前 面 章 节 中 讲 过 关于 尺寸 的 样式 ， 即 width、height 这 两 个 属性 。CSS 中 还 有 四 个 关 
于 尺寸 的 样式 属性 分 别 为 min-width、min-height、max-width 和 max-height。 下 面 将 详细 
介绍 这 四 个 属性 。 


1. min-width 和 min-height 


min-width 和 min-height 属性 分 别 是 最 小 宽度 和 最 小 高 度 。 在 制作 网 页 时 ， 如 果 块 标 
签 宽度 固定 ， 当 没有 设置 高 度 ， 其 高 度 会 根据 内 容 进行 变化 而 无 法 确定 高 度 。 当 高 度 固 
定时 ， 其 高 度 不 会 随 着 内 容 的 增加 而 发 生变 化 ， 因 此 会 发 生 溢出 现象 。 为 了 避免 上 述 两 
种 情况 可 以 使 用 min-height 属性 来 固定 最 小 高 度 ， 当 内 容 高 度 大 于 最 小 高 度 时 会 以 内 容 
高 度 为 准 。 接 下 来 通过 案例 来 演示 min-height 属性 ， 有 具体 如 例 8-11 所 示 。 
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【 例 8-11】 min-height 属性 。 


cawm 必 wmNP 


<!doctype html> 

<html> 

<head> 

<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 

type="/image/x-icon"> 

<meta charset="utf-8"> 

<title>CSS 扩 展 </title> 

<style> 
#boxl{ width:200px; float:left; border:lpx black solid; 

min-height:150px; } 
#box2{ width:200px; float:left; border:lpx black solid; 
margin-left:10px; min-height:150px; } 

</style> 

</head> 

<body> 

<divid="box1"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 , 一 直 秉 承 “ 用 良心 做 教育 ” 
的 理念 ， 致 力 于 打造 IT 教育 全 产业 链 人 才 服 务 平台 </div> 

<div id="box2"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉 承 "用 良心 做 教育 " 
的 理念 ， 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打 造 互联 网 研发 人 才 服 务 优质 平台 。 
公司 总 部 位 于 北京 ， 目 前 已 在 深圳 、 上 海 、 郑 州 、 广 州 、 大 连 、 武 汉 、 成 都 、 西 安 、 杭 州 、 
青岛 、 重 庆 、 长 沙 、 哈 尔 滨 成 立 了 分 公司 。</div> 

</body> 

</html> 


运行 结果 如 图 8.12 所 示 。 





于 锋 教育 隶属 于 北京 千 话 互 
区 科技 有 限 公司 , 一 直 和 要 
的 "用 良心 做 教育 "的 理念 ， 
/ 致力 于 打造 [[ 教 育 全 产 | 尾 中 国 [[ 职 业 教育 领先 品 


链 人 才 服 务 平台 全 力 打造 互联 网 研发 人 
睹 服务 优质 平台 。 公 司 总 部 
位 于 北京 ， 和 目前 已 在 深圳 
止 海 、 郑州。 广州 ,大 连 ， 
臣 汉 . 成都、 西安、 杭州 

| 青岛 重庆 、 长 沙 、 哈 尔 滨 成 
区 了 分 公司 。 

















图 8.12 最 小 高 度 展示 效果 


图 8.12 中 可 以 看 出 ,设置 最 小 高 度 后 ， 当 内 容 高 度 小 于 最 小 高 度 时 ， 以 最 小 高 度 为 





准 ， 当 内 容 高 度 大 于 最 小 高 度 时 ， 以 内 容 的 高 度 为 准 。 这 就 是 最 小 高 度 的 表现 形态 。 最 
小 宽度 和 最 小 高 度 的 理论 一 样 ， 这 里 就 不 再 袭 述 。 


2. max-width 和 max-height 


max-width 和 max-height 属性 分 别 是 最 大 宽度 和 最 大 高 度 。 给 标签 设置 最 大 高 度 ， 
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当 内 容 高 度 小 于 最 大 高 度 时 ， 以 内 容 高 度 为 准 ， 当 内 容 高 度 大 于 最 大 高 度 时 ， 以 最 大 高 
度 为 准 。 接 下 来 通过 案例 来 演示 最 大 高 度 展示 效果 ， 具 体 如 例 8-12 所 示 。 
【 例 8-12】 最 大 高 度 展示 效果 。 


<!doctype html> 
<html> 
<head> 
<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 
type="/image/x-icon"> 
<meta charset="utf-8"> 
<title>CSS 扩 展 </title> 
<style> 
#boxl{ width:200px; float:left; border:lpx black solid; 
max-height:150px; } 
#box2{ width:200px; float:left; border:lpx black solid; 
margin-left:10px; max-height:150px; } 
</style> 
</head> 
<body> 
16 ”<divid="box1"> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 , 一 直 秉 承 “ 用 良心 做 教育 ” 
TE 的 理念 ， 致 力 于 打造 IT 教育 全 产业 链 人 才 服 务 平台 </div> 
18 ”<div id="box2"> 千 锋 教 育 隶 属于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉承 "用 良心 做 教育 " 
19 的 理念 ， 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打 造 互联 网 研发 人 才 服 务 优质 平台 。 
20 公司 总 部 位 于 北京 ， 目 前 已 在 深圳 、 上 海 、 郑 州 、 广 州 、 大 连 、 武 汉 、 成 都 、 西 安 、 杭 州 、 
21 青岛 、 重 庆 、 长 小、 哈尔滨 成 立 了 分 公司 。</div> 
22 </body> 
23 </html> 


运行 结果 如 图 8.13 所 示 。 
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| 下 锋 教育 隶属 于 北京 千 话 互 育 隶属 于 北京 干 笑 互 
车 科 技 有 限 公司 ,一 坪 乖 科技 有 限 公司 ,一直 鳞 
到“ 用 良心 做 教育 ” 的 理 "用 良心 做 教育 "的 理念 ， 
内， 致力 于 打造 I 教育 全 产 | 是 中 国 IT 职业 教育 领先 品 
也 链 人 才 服 务 平台 ,全力 打 造 互联 爽 研发 人 
服务 优质 平台 。 公 司 总 部 
于 北京 ， 自 前 已 在 深圳 \ 
下 海天 斌 ， 广 州 ， 天 连 、 
武汉 成都、 西安 、 杭 州 、 
立 了 分 公司 。 














图 8.13 最 大 高 度 展示 效果 
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图 8.13 可 以 看 出 ， 最 大 高 度 的 表现 形态 。 通 过 最 大 宽 高 和 最 小 宽 高 ， 可 以 很 方便 地 
控制 容器 的 尺寸 变化 。 


8.3.3 添加 省 略 号 


当 一 段 文字 超过 容器 宽度 时 ， 和 希望 能 够 通过 省 略 号 的 方式 进行 展示 ， 可 以 使 用 
text-overflow 属性 来 实现 。text-overflow 属于 CSS3 中 的 属性 ， 规 定 当 文 本 溢出 包含 元 素 
时 产生 的 操作 ， 其 默认 值 为 clip， 即 修剪 文本 ; 可 选 值 ellipsis， 即 显示 省 略 号 来 代表 被 
修剪 的 文本 。 接 下 来 通过 案例 来 演示 text-overflow 属性 可 选 值 ellipsis 的 使 用 ， 具体 如 例 
8-13 所 示 。 

【 例 8-13】 text-overflow 属性 可 选 值 ellipsis 的 使 用 。 


<!doctype html> 

<html> 

<head> 

<link rel="icon" href="http://www.mobiletrain.org/favicon.ico" 





type="/image/x-icon"> 
<meta charset="utf-8"> 
<title>CSS 扩 展 </title> 
<style> 
#box{ width:300px; border:lpx black solid; 
0 white-space:nowrap; overflow:hidden; 


oA DNDr 


Es 


text-overflow:ellipsis; } 

</style> 

13 </head> 

4 <body> 

15 ”<div idq="box"> 千 锋 教 育 隶 属于 北京 干 锋 互 联 科技 有 限 公司 ， 一 直 秉承 “用 良心 做 教育 ” 
的 理念 ， 致 力 于 打造 IT 教育 全 产业 链 人 才 服 务 平台 </div> 

7 </body> 

8 </html> 


运行 结果 如 图 8.14 所 示 。 
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图 8.14 文字 省 略 号 展示 效果 


例 8-13 中 ， 首 先 通过 将 white-sapce 属性 设置 为 nowrap 值 强制 文字 不 换行 ， 然 后 将 
overflow 属性 设置 为 hidden， 将 值 溢出 的 文字 进行 隐藏 操作 ， 最 后 通过 text-overflow 属 
性 设置 为 ellipsis 值 给 文字 添加 省 略 号 。 
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8.3.4 CSS 表格 


前 面 章节 中 ， 已 经 介绍 过 HTML 表格 的 操作 ， 表 格 边框 之 间 会 有 空隙 ， 可 以 用 CSS 
边框 样式 来 消除 表格 边框 之 间 的 空隙 。 接 下 来 通过 案例 来 演示 table 表格 展示 效果 , 具体 
如 例 8-14 所 示 。 

【 例 8-14】 table 表格 展示 效果 。 





运行 结果 如 图 8.15 所 示 。 








8.15 table 表格 展示 效果 
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第 9 行 border-collapse 属性 设置 表格 的 边框 是 否 被 合并 为 单一 的 边框 ,separate 默认 
边框 会 被 分 开 。collapse 值 ， 边 框 会 合并 为 单一 的 边框 。 


8.4 本 章 小 结 


通过 本 章 的 学 习 ， 了 解 HTML 标签 规范 ， 以 及 掌握 如 何 使 用 规范 的 标准 进行 网 页 开 





六。 了解 HTML 和 CSS 扩展 内 容 ， 丰 富 网 页 的 功能 性 。 


8.5 己 是 


1. 填空 题 


(1) 固定 最 小 高 度 的 属性 是 8 

(2) HTML 标签 规范 中 划分 成 规则 和 规则 两 类 。 
(3) 告知 浏览 器 网 页 所 使 用 的 HTML 规范 的 是 

(4) 设置 网 站 的 缩 略 图 需要 用 到 的 标签 是 


(5) 常用 来 表示 计算 机 的 源 代码 。 
2. 选择 题 
(1) 下 列 选项 中 ， 标 签 柑 套 规 则 不 正确 的 是 ( 。”)。 

A. div、Pp B. table、 tr CC ps ll D: sk 
(2) CSS 雪碧 技术 利用 的 CSS 样 式 是 (  )。 

A. background-image B. background-position 

C. background-repeat D. background-color 
(3) <meta> 标 签 中 name 属性 值 不 正确 的 是 (。 )。 

A. keywords B. description C. author D. media 
(4) 下 列 标签 不 能 嵌 套 在 <table> 标 签 内 的 是 )。 

A. <tr>、<caption> B. <thead> 

C. <tbody>、<tfoof D. <div>、<span> 
(5) 可 以 形成 页 面 嵌 套 效果 的 标签 是 澳 

A. <link> B. <meta> C. <iframe> D. <pre> 
3. 思考 题 


(1) 请 简 述 如 何 给 单行 文本 添加 省 略 号 。 
(2) 请 简 述 CSS 雪碧 技术 的 优点 。 





和 销 9 音 ehapPpter GO _ 
HTML&CSS 实战 


本 章 学 习 目标 

。 掌握 如 何 解 决 实际 开发 需求 ; 

。 了 解 问题 与 解决 问题 。 

古人 云 ,“ 纸 上 得 来 终 觉 浅 ， 绝 知 此 事 要 躬 行当 理论 知识 学 完 后 ， 需 要 开始 进行 
实战 的 部 分 。 只 有 通过 实践 ， 才 能 发 现 问题 、 解 决 问题 ， 从 而 更 好 地 理解 和 掌握 相关 的 


知识 点 。 
9.1 元 素 屏 慕 居中 


9.1.1 问题 


在 浏览 网 页 时 ， 经 常会 看 到 一 些 网 站 的 整体 是 在 浏览 器 中 ， 并 且 进 行 居中 显示 的 ， 
如 百度 首页 居中 显示 ， 如 图 9.1 所 示 。 


Bai 合 百度 
四 二 | 


图 9.1 百度 首页 居中 显示 


图 9.1 明显 的 特点 就 是 无 论 浏览 器 的 分 辩 率 是 多 少 ， 它 都 能 够 居中 显示 。 那 么 问题 
来 了 ， 如 何 使 元 素 在 不 同 的 浏览 器 分 辩 率 下 居中 显示 ? 下面 来 看 解决 方案 。 


9.1.2 解决 方案 


通过 CSS 样式 中 的 margin 外 边 距 可 以 解决 居中 的 问题 。 前 面 章节 提 及 过 auto 值 ， 
表示 自 适应 。 当 给 元 素 添加 margin-left 值 为 auto 时 ， 元 素 左 边 距 为 自 适应 ， 左 边 能 自 适 
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应 多 少 空间 就 会 产生 多 少 左 边 距 。 同 样 当 设置 margin-right 值 为 auto 时 ， 元 素 右边 距 为 
自 适 应 ， 元 素 右边 能 自 适应 多 少 空间 就 会 产生 多 少 右边 距 。 如 果 左 右边 距 都 设置 成 auto 
自 适 应 值 ， 则 元 素 左右 空间 都 需要 自 适应 ， 就 会 平均 分 配 边 距 ， 从 而 使 元 素 在 不 同 的 浏 
览 器 分 辨 率 下 都 能 够 居中 显示 。 当 然 可 以 把 margin 整合 成 复合 写法 。 接 下 来 通过 案例 来 
演示 ， 有 具体 如 例 9-1 所 示 。 

【 例 9-1】 通过 CSS 样式 中 的 margin 外 边 距 解 决 居中 问题 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 元 素 屏幕 居中 </title> 

<style> 
*{ margin:0; padding:0; } 
body{ height:2000px; } 
-main{ width:200px; height:100px; border:lpx black solid; 

10 margin:10px auto; } 

11 </style> 

12 </head> 

13 <body> 

14 <div class="main"></div> 

15 </body> 

16 </html> 


运行 结果 如 图 9.2 所 示 。 


CornoDNpe 


中 元素 屏 蘑 居 中 x 


























图 9.2 ”元素 居中 展示 效果 


这 种 居中 的 方式 只 是 针对 块 类 型 元 素 的 标签 。 对 于 内 联 类 型 元 素 的 标签 ， 需 要 采用 
给 父 容器 设置 text-align 值 为 center 的 方式 进行 居中 处 理 。 接 下 来 通过 案例 来 演示 ， 有 具体 
如 例 9-2 所 示 。 

【 例 9-2】 解决 内 联 类 型 元 素 的 标签 居中 显示 问题 。 

二 <!doctype html> 

之 <htm1> 
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3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 元 素 屏幕 居中 </title> 

6 <style> 

Ey *{ margin:0; padding:0; } 

8 body{ height:2000px; text-align:center; } 
9 -main{ position:relative; top:10px; } 
10 </style> 

11 </head> 

12 <body> 

13 <span class="main"> 这 是 文本 内 容 </span> 

14 </body> 

15 </html> 


运行 结果 如 图 9.3 所 示 。 














这 是 文本 内 容 


9.3 ”内 联 元 素 居中 展示 效果 


9.2 分 页 展示 


9.2.1 问题 





分 页 展示 是 网 页 中 常见 的 布局 效果 ， 当 数据 量 比较 多 的 情况 下 ， 就 会 用 分 页 进行 展 
示 ， 如 百度 搜索 页 ， 如 图 9.4 所 示 。 


六 条 


角 党 人 ; bh E 
6 


< 上 一 页 1 2 3 - 5 7 8 9 10 下 一 页 > 


9.4 百度 搜索 分 页 展示 效果 


接 下 来 先 通过 基本 结构 来 实现 分 页 效果 ， 具 体 如 例 9-3 所 示 。 
【 例 9-3】 通过 基本 结构 实现 分 页 效果 。 


亚 <!doctype html> 
2 <html> 


246 


TML5 从 入 门 到 精通 


<head> 

4 <meta charset="utf-8"> 

5 ”<title> 分 页 展示 </title> 

6 <style> 

村 *{ margin:0; padding:0; } 
8 body{ height:2000px; } 

9 li{ list-style:none; } 


10 af text-decoration:none; } 

1 -page{ margin-top:10px; } 

2 -page li{ width:20px; height:20px; line-height:20px; 
13 border:1px #ele2e3 solid; text-align:center; 

14 float:left; font-size:14px; margin-left:10px; } 
15 -page 1i af width:100%; height:100%; display:block; } 
16 </style> 

17 </head> 

18 <body> 

19 <ul class="page"> 

20 <li><a href="#">1</a></1i> 

2 <li><a href="#">2</a></l1i> 

22 <li><a href="#">3</a></1i> 

eet <li><a href="#">4</a></1i> 

24 <li><a href="#">5</a></1i> 

25 <li><a href="#">6</a></1i> 

2 </ul> 

27 </body> 

28 </html> 


运行 结果 如 图 9.5 所 示 。 





口 分 页 展示 x 人 
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图 9.5 分 页 展示 效果 
例 9-3 中 实现 了 分 页 效果 , <li> 列 表 项 采用 浮动 处 理 , 无 法 通过 设置 margin 值 为 auto 
的 方式 进行 居中 ， 而 且 <li> 标 签 也 不 是 内 联 类 型 的 元 素 ， 因 此 也 无 法 通过 设置 父 元 素 的 
text-align 值 为 center 的 方式 进行 居中 。 那 么 问题 就 出 现 了 ， 该 如 何 让 分 页 在 父 元 素 中 居 
中 展示 ? 下 面 将 介绍 具体 的 解决 方法 。 


9.2.2 解决 方案 


























元 素 支 持 宽 高 和 左右 排列 ， 并 且 可 以 在 父 容器 中 居中 展示 。 因 此 ， 可 以 通过 设置 











display 值 为 mline-block 的 方式 进行 处 理 , 让 元 素 既 具备 块 类 型 的 特点 , 同时 也 具备 内 联 
类 型 的 特点 。 这 样 就 可 以 让 分 页 展示 在 父 容器 中 居中 显示 。 接 下 来 通过 案例 来 演示 ， 具 
体 如 例 9-4 所 示 。 

【 例 9-4】 解决 分 页 展示 问题 。 












































图 9.6 分 页 居中 展示 效果 
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| 
NN 


9.3 三 角形 图 标 


| 
出 


9.3.1 问题 


在 很 多 导航 效果 中 ， 通 常会 添加 一 个 三 角形 的 图 标 ， 例 如 天 猫 官 网 导航 条 如 图 9.7 
所 示 。 


我 的 淘 三 由 我 关注 的 后 串 。 轨 风 物 车 0 件数 写 二 中 手机 版 。 沽 三 网 。 企业 购 。 商 寺 三 竺 





图 9.7 天 猫 官 网 导航 条 
盒子 模型 只 能 通过 设置 宽 高 属性 的 矩形 框 出 来 ， 而 三 角形 图 标 可 以 使 用 图 片 来 实 
现 ， 但 这 种 方式 比较 麻烦 ， 可 以 通过 CSS 中 的 border 边框 属性 来 实现 三 角形 效果 。 
9.3.2 解决 方案 


首先 给 一 个 盒子 模型 的 四 个 边框 分 别 设置 四 种 不 同 的 颜色 ， 边 框 宽度 设置 大 一 些 。 
接 下 来 通过 案例 来 演示 ， 具 体 如 例 9-5 所 示 。 
【 例 9-5】 为 盒子 模型 的 四 个 边框 分 别 设置 四 种 不 同 的 颜色 。 


下 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 三 角形 图 标 </title> 

6 <style> 

3 *{ margin:0; padding:0; } 

8 #box{ width:100px; height:100px; 
9 border-top:50px red solid; 

0 border-right:50px yellow solid; 
1 border-bottom:50px blue solid; 
ee border-left:50px green solid; } 

3° </style> 

14 </head> 
15 <body> 

6 <div id="box"></div> 
17 </body> 

8 </html> 





运行 结果 如 图 9.8 所 示 。 
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图 9.8 设置 四 条 不 同 的 边框 





图 9.8 可 以 看 到 盒子 模型 的 边框 衔接 处 为 两 种 颜色 的 交集 ， 形 成 斜 线 的 展示 效果 。 
当 把 宽 高 都 设置 成 零 时 ， 边 框 就 会 无 颖 的 全 部 衔接 到 一 起 ， 具 体 如 例 9-6 所 示 。 
【 例 9-6】 将 盒子 的 边框 宽 高 都 设置 为 零 。 


和 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 三 角形 图 标 </title> 
6 <style> 

2 *{ margin:0; padding:0; } 

8 #box{ width:0px; height:0px; 

9 border-top:50px red solid; 

10 border-right:50px yellow solid; 
二 border-bottom:50px blue solid; 

4 border-left:50px green solid; } 
13 </style> 

14 </head> 

15 <body> 

16 <div id="box"></div> 

17 </body> 

18 </html> 


行 结果 如 图 9.9 所 示 。 


[ey 





口 三 角形 图 x 








CG | © file:///D:/HTMLexample/chapter09/9-6.html 











图 9.9 设置 四 条 不 同 的 边框 
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将 其 中 的 三 条 边 的 颜色 都 设置 成 透明 ， 这 样 只 留 下 一 条 边 的 样式 是 三 角形 图 标 。 接 
下 来 通过 案例 来 演示 ， 具 体 如 例 9-7 所 示 。 
【 例 9-7】 三 角形 图 标 。 


1 <!doctype html> 

这 <html> 

法 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 三 角形 图 标 </title> 

6 <style> 

*{ margin:0; padding:0; } 

8 #box{ width:0px; height:0px; 

9 border-top:50px red solid; 

10 border-right:50px transparent solid; 

EL border-bottom:50px transparent solid; 
12 border-left:50px transparent solid; } 
13 </style> 

14 </head> 

15 <body> 

16 <div id="box"></div> 

17 </body> 

18 </html> 


运行 结果 如 图 9.10 所 示 。 


x 昌国 


C3 [ey file:///D:/HIMLexample/chapter09/9-7. html 妆 | 











9.10 三 角形 图 标 展示 效果 


9.4 漂亮 的 上 传 按 短 


9.4.1 问题 


网 页 上 传 功能 是 通过 设置 <input> 标 签 的 type 属性 值 为 file 的 方式 来 实现 的 。 上 传 按 
钮 的 默认 样式 由 于 受 限于 <input> 标 签 ， 是 不 容易 修改 的 。 那 么 如 何 能 够 按照 设计 师 给 出 
的 上 传 按钮 样式 进行 效果 展示 呢 ? 漂亮 的 上 传 按钮 样式 如 图 9.11 所 示 。 
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站 .并 辐 饭 文人 夫 ， 业 计 睹 j 垢 |， 日 我 的 设备 


图 9.11 漂亮 的 上 传 按钮 


9.4.2 解决 方案 


首先 可 以 设置 上 传 按钮 的 尺寸 ， 然 后 把 多 余 的 部 分 进行 溢出 隐藏 处 理 。 接 下 来 通过 
案例 来 演示 ， 具 体 如 例 9-8 所 示 。 





【 例 9-8】 设置 上 传 按钮 太 寸 ， 将 多 余 的 部 分 进行 溢出 隐藏 处 理 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 上 传 按 钮 </title> 

<style> 
#fileBox{ width:86px; height:34px; overflow:hidden; } 
#fileBox input{ width:100%; height:100%; background:red; 

</style> 

10 </head> 

11 <body> 

12 <div id="fileBox"> 

13 <input type="file"> 

14 </div> 

15 </body> 

16 </html> 


运行 结果 如 图 9.12 所 示 。 


Fn 上 传 按 乌 


GG | © file: /0D:/HIMLexample/chapter0919-8.Html 家 
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图 9.12 设置 上 传 按钮 的 尺寸 


将 上 传 按 钮 样式 和 设计 师 想 要 显示 的 样式 通过 定位 方式 合 加 起 来 ， 然 后 再 将 上 


} 


传 按 





钮 透明 度 设 置 为 零 。 这 样 从 效果 上 只 会 看 到 需要 显示 的 样式 ， 即 做 出 一 个 漂亮 的 -| 


钮 ， 但 实际 单 击 的 是 透明 上 传 按钮 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 9-9 所 示 。 
【 例 9-9】 实现 漂亮 的 上 传 按钮 。 


<!doctype html> 


上 传 按 


2 
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<html> 
<head> 
<meta charset="utf-8"> 
<title> 上 传 按 钮 </title> 
<style> 
#fileBox{ width:86px; height:55px; overflow:hidden; 
position:relative; } 
#fileBox input{ width:100%; height:100%; background:red; 
position:absolute; z-index:2; opacity:0; } 
#fileBox div{ width:100%; height:100%; 
background:url (upload.png) no-repeat; 
position:absolute; z-index:1; } 
</style> 
</head> 
<body> 
<div id="fileBox"> 
<input type="file"> 
<div></div> 
</div> 
</body> 
</html> 


结果 如 图 9.13 所 示 。 


x 业 鸭 
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9.13 ”实现 漂亮 的 上 传 按钮 


9.5 标签 切 搁 页 


标签 切换 页 也 叫 选项 卡 ， 是 网 页 中 最 常见 的 一 种 效果 。 目 的 是 使 网 页 能 够 合理 地 利 


9.5.1 


用 空间 ， 从 而 展现 更 多 的 内 容 。 下 面 是 一 些 常见 的 标签 切换 页 效果 图 ，QQ 新 闻 标签 页 
和 SINA 新 闻 标 签 页 如 图 9.14 所 示 。 


布局 制作 


下 面 来 展示 标签 切换 页 ， 上 边 是 三 个 按钮 ， 其 中 一 个 按钮 有 选中 样式 。 下 边 对 应 三 
块 展示 内 容 ， 其 中 只 会 显示 对 应 选中 按钮 的 展示 内 容 ， 其 他 展示 内 容 部 分 被 隐藏 。 标 签 
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切换 页 效果 图 如 图 9.15 所 示 。 





图 片 | 专栏 ”热点 








重症 男 重 用 眼泪 “ 求 热 ” 开 飞机 带 姆 妇 上 天 摸 云彩 
对 实 拍 民 关 死命 搜 住 跳楼 女 自己 体力 透支 难受 器 喊 
“ 图 82 岁 老人 弃 洋房 住 集装箱 比基尼 冠军 每 天 吃 1 鸡蛋 。 月 哈尔滨 送 餐 小 哥 突 发 心 梗 顾客 恰好 是 医院 大 夫 
国 湖 鱼 术 多 高 校 请 师 生 免费 吃 信 移 背 包 襄 藏 178 粒 毒品 人 W| 女 了 坐 男子 腿 上 开 货车 女生 救 人 沈 亡 获救 者 夸 汰 


sli EE 


'* 图 济南 500 余 人 拆 46 栋 违 建 别墅 素 异 但 用 








图 9.14 QQ 新 闻 标 签 页 和 SINA 新 闻 标签 页 


娱乐 电影 音乐 


板块 一 的 内 容 


9.15 ”标签 切换 页 效果 图 


接 下 来 通过 案例 先 演示 标签 页 基本 HTML 结构 和 CSS 样式， 具体 如 例 9-10 所 示 。 
【 例 9-10】 标签 页 基本 HTML 结构 和 CSS 样式 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 标 签 切换 页 </title> 
<style> 
*{ margin:0; padding:0; } 
li{ list-style:none; } 
.Clear:after{ content:""; display:block; clear:both; } 
10 #main{ width:310px; margin:10px; } 


oaume wm 


二 #1ist{ border-left:1px #cfcfcf solid; 

12 border-top:2px #206f96 solid; } 

13 #1list li{ float:left; width:102px; height:29px; 

14 border-right:1lpx #cfcfcf solid; line-height:29px; 
下 5 text-align:center; background:#CCC repeat-x; } 

16 #1list .active{ background:#ffffff; } 

2 #content{ height:100px; border:lpx #cfcfcf solid; 

18 padding:30px 1l0px; margin-top:-lpx; } 

19 #content div{ display:none; } 
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运行 结果 如 图 9.16 所 示 。 


癌 标签 切 摘 页 员 
> [Dem/m mm oe A] i 
娱乐 


板块 一 的 内 容 











图 9.16 标签 切换 页 


这 里 会 看 到 一 个 小 问题 ， 选 中 按钮 要 与 展示 内 容 区 域 衔接 到 一 起 ， 而 不 是 像 上 面 展 
示 的 那样 ， 按 钮 与 内 容 之 间 有 一 条 线段 。 通 过 给 选中 按钮 多 添加 一 个 像素 的 高 和 展示 内 
容 区 域 向 上 多 移动 一 个 像素 的 方式 ， 可 以 将 它们 完美 地 融合 在 一 起 。 





dl 
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11 #1list .active{ background : #ffffff; height:30px; } 
2 #content{ height : 100px; border : lpx #cfcfcf solid; 
和 3 padding : 30px 1l0px; margin-top:-lpx; } 

14 #content div{ display : none; } 

15 #content .show{ display : block; } 

16 </style> 


9.5.2 ”JavaScript 动态 切换 


动态 的 切换 制作 好 的 标签 页 要 用 JavaScript 语言 来 实现 ， 由 于 本 书 只 涉及 
HTML+CSS 部 分 的 内 容 ， 因 此 只 添加 JavaScript 代码 来 完成 。 至 于 如 何 实现 ， 这 里 不 再 
歼 述 。 接 下 来 演示 在 例 9-10 的 <body> 标 签 中 添加 下 面 JavaScript 代码 。 有 具体 如 例 9-11 
所 示 。 

【 例 9-11】 在 例 9-10 的 <body> 标 签 中 添加 JavaScript 代码 。 





要 











1 <script> 

2 var aLi = document .querySelectorAll ('#list 1i'); 

| var aDiv = document .querySelectorAll ('#content div'); 
4 for (var i=0; i<aLi.length; i++){ 

| aLi[il.index = i; 

6 aLi[i] .onclick = function(){ 

for(var i=0; i<aLi.length; i++){ 

8 aLi[i].className = "''; 

9 aDiv[i].className = "''; 


10 } 

1 this.className = 'active'; 

4 aDiv[this.index] .className = 'show'; 
3 } 

14 下 


oP <HSCripE> 


运行 结果 如 图 9.17 所 示 。 





口 标签 切换 页 x ve 
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9.17 ”JavaScript 动态 切换 标签 页 
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上 述 的 标签 页 可 以 通过 单 击 的 方式 进行 切换 操作 。 





9.6 ”Photoshop 妃 力 


Photoshop, 简称 “PS”， 是 由 Adobe Systems 开发 和 发 行 的 图 像 处 理 软 件 。 Photoshop 
主要 用 于 处 理由 像素 所 构成 的 数字 图 像 。 使 用 其 众多 的 编 修 与 绘图 工具 ， 可 以 有 效 地 进 
行 图 片 编 辑 工 作 。 本 章 主 要 介绍 Photoshop 工具 中 关于 网 页 切 图 的 操作 。 首 先 了 解 下 
Photoshop 工具 的 基本 组 成 。 


9.6.1 菜单 项 


打开 Photoshop 工具 后 ， 可 以 在 上 方 看 见 Photoshop 的 菜单 项 ， 如 图 9.18 所 示 。 





9.18 Photoshop 菜单 项 展示 效果 


菜单 项 主要 包含 :【 文 件 、【 编 辑 】【 图 像 】，【 图 层 】、【 选 择 】、【 滤 镜 、【 视 图 
【窗口 【帮助 】 等 选项 。 
由于 涉及 的 功能 非常 多 ， 这 里 只 介绍 一 些 常 用 的 操作 和 切 图 相关 的 操作 。 

(1) 新 建 一 个 Photoshop 图 像 

新 建 一 个 Photoshop 图 像 是 最 基本 的 操作 。 单 击 【 文 件 】 菜 单 ， 选 择 【 新 建 】 命令， 
会 打开 一 个 【新 建 】 对 话 框 ， 在 【新 建 】 对 话 框 中 可 以 对 Photoshop 图 像 的 宽 、 高 进行 
大 小 设置 ， 注 意 其 单位 选择 为 像素 。Photoshop 新 建 对 话 框 如 图 9.19 所 示 。 

(2) 将 文件 存储 为 Web 和 设备 所 用 格式 

保存 Photoshop 图 像 的 操作 为 单 击 【文件 】 菜 单 ， 选 择 【 存 储 为 Web 和 设备 所 用 格 
式 】 命 令 , 会 打开 一 个 Photoshop 储存 对 话 框 ， 在 Photoshop 储存 对 话 框 中 可 以 选择 要 存 
储 的 图 片 格式 类 型 ， 有 gif、jpeg、png-8、png-24 等 多 种 可 选 格式 ， 如 图 9.20 所 示 。 在 
前 面 章 节 中 介绍 图 片 标签 时 ， 已 经 对 这 些 格式 进行 过 讲解 ， 这 里 不 再 缆 述 。 选 择 完 格式 
后 ， 就 可 以 单 击 【 存 储 】 命 令 进行 图 片 保 存 。 
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9.19 ”Photoshop 新 建 对 话 框 


版 


权 和 联系 信息 





9.20 ”Photoshop 存储 对 话 框 
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(3) 设置 图 像 模 式 

有 时， 从 在 网 上 下 载 的 图 片 在 Photoshop 工具 里 无 法 进行 操作 ， 其 很 大 一 部 分 原因 
是 图 像 的 模式 问题 ， 因 此 想 要 对 图 片 进行 操作 ， 必 须 单 击 【图 像 】 一 【模式 】 一 【RGB 
颜色 】。Photoshop 图 像 模式 展示 效果 如 图 9.21 所 示 。 




















9.21 Photoshop 图 像 模式 展示 效果 


(4) 图 像 大 小 设置 、 画 布 大 小 及 图 像 旋转 设置 

有 时 需要 对 图 像 容 器 大 小 进行 调整 ， 可 以 单 击 【图 像 】 一 【图 像 大 小 ])， 从 而 重新 
设置 图 像 容器 的 宽 、 高 ，Photoshop 图 像 大 小 展示 效果 如 图 9.22 所 示 。 

改变 容器 大 小 的 方式 除了 单 击 【 图 像 大 小 】 命 令 外 ， 还 可 以 通过 单 击 【 画 布 大 小 】 


命令 进行 设置 ，Photoshop 画布 大 小 展示 效果 如 图 9.23 所 示 。 
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厅 重 定 图 像 像素 (人): 


两 次 立方 (自动) 了 





画布 扩展 颜色 : | 背景 周口 





9.22 ”Photoshop 图像 大 小 展示 效果 9.23 Photoshop 画布 大 小 展示 效果 


【图 像 大 小 】 和 
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【画布 大 小 】 两 个 选项 是 有 区 别 的 ,【 图 像 大 小 】 既 改变 画布 大 小 又 


改变 画布 中 内 容 的 大 小 ， 而 【画布 大 小 】 只 会 改变 画布 的 大 小 并 不 会 改变 画布 中 内 容 的 大 


小 。 例 如 ， 打 开 一 张 





图 片 ， 分 别 改变 【图 像 大 小 】 和 【画布 大 小 】 后 的 效果 如 图 9.24 所 示 。 





9.24 图 像 大 小 与 画布 大 小 对 比 


【图 像 旋 转 】 选 项 也 是 常用 的 一 个 操作 ， 它 可 以 对 图 像 进 行 水 平 或 垂直 或 任意 角度 
的 旋转 操作 ， 设 置 水 平 翻转 画布 ， 效 果 如 图 9.25 所 示 。 








图 9.25 图 像 旋转 展示 效果 


(5) 设置 标尺 和 参考 线 

使 用 标尺 可 以 准确 地 对 齐 图 像 或 元 素 ， 同 时 可 以 准确 地 确定 图 像 或 元 素 的 位 置 ， 还 
可 以 准确 地 选取 一 个 范围 。 单 击 【 视 图 】 菜 单 ， 选 择 【 标 尺 】 命 令 ， 即 可 以 在 图 像 上 显 
示 出 标尺 ，Photoshop 标尺 展示 效果 如 图 9.26 所 示 。 
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9.26 ”Photoshop 标尺 展示 效果 


鼠标 在 标尺 上 进行 拖 动 操作 时 ， 可 以 拉 取 出 多 条 辅助 线 ， 此 线段 为 参考 线 ， 通 过 参 


考 线 可 以 辅助 测量 页 面 元 素 的 位 置 ，Photoshop 参考 线 展示 效果 如 图 9.27 户 


即使 用 到 最 闽 的 山上 ， 
一 次 也 只 能 肢 踏 实地 地 迈 一 步 。 


一 一 干 锋 成 功 心 语 = 血 


二 
加 
及 

土 
本 
4 

A 
2 
ie 





月 大 四 志 


图 9.27 Photoshop 参考 线 展示 效果 





(6) 窗 
单 击 【窗口 】 菜 单 ， 可 以 显示 和 调用 辅助 信息 面板 ，Photoshop 辅助 信息 














[ 示 。 





展示 效果 如 图 


9.28 所 示 。 这 些 面 板 对 于 Photoshop 的 操作 非常 有 用 ， 下 节 中 会 对 辅助 信息 进行 详细 讲解 。 
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即使 必 到 最 高 的 山上 ， | 
一 次 也 只 能 胸中 实地 地 这 一 步 。 


一 二 生成 功 心 这 a 让 





v Laianfeng jpe 


ETE3TTRTT 


9.28 Photoshop 辅助 信息 展示 效果 


9.6.2 工具 栏 


打开 Photoshop 工具 后 ， 可 以 在 左 侧 看 见 Photoshop 的 工具 栏 ， 如 图 9.29 所 示 。 


即使 肥 到 最 高 的 山上 ， a 
一 次 也 只 能 脚踏实地 地 迈 一 步 。 


一 一 干 锋 成 功 心 语 = 血 





图 9.29 Photoshop 工具 栏 展示 效果 
工具 栏 主 要 包含 :【 移 动工 具 】【 选 框 工具 】【 套 索 工 具 】【 吸 管 工 具 】【 文 字 工 
具 】【 抓 手工 具 】【 缩 放 工具 】 等 选项 。 由 于 工具 栏 中 的 功能 非常 多 ， 这 里 只 是 介绍 一 
些 常用 的 操作 和 切 图 相关 的 操作 。 
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(1)【 移 动工 具 】 展 示 为 一 个 小 第 头 样式 Be。 当 图 像 中 元 素 较 多 时 ， 可 通过 此 工具 
选择 当前 希望 操作 的 图 像 元 素 ， 并 且 可 以 对 图 像 中 元 素 的 位 置 进行 移动 ， 也 可 以 拖 动 元 
素 到 其 他 画布 中 。 

(2)【 选 框 工 具 】 展 示 为 一 个 虚线 矩形 框 样式 国 。 通 过 此 工具 可 以 量 取 Photoshop 
图 像 中 元 素 的 尺寸 和 位 置 ，Photoshop 选 框 工具 展示 效果 如 图 9.30 所 示 。 此 功能 需要 配 
合 信息 面板 一 起 使 用 ， 后 面 会 有 详细 的 介绍 。 


又 件 厅 ”和 芋 富 昌 x 字 fj 计生 可 











一 一 二 二 以 Ph 心 天 4 血 





图 9.30 Photoshop 选 框 工具 展示 效果 
有 时 如 果 想 要 精确 地 测量 选 框 的 范围 ， 则 需要 对 选 框 进行 增加 区 域 或 减少 区 域 的 微 
调处 理 。 按 住 Shift 键 会 出 现 一 个 加 号 ， 表示 可 以 增加 选 框 范围 ， 按 住 Alt 键 会 出 现 一 个 
减 号 ， 表 示 可 以 减少 选 框 范围 。 
(3)【 吸 管 工具 】 展 示 为 一 个 带 有 滴 管 的 样式 较 . 通过 此 工具 可 以 获取 Photoshop 
图 像 指 定位 置 的 颜色 值 。 吸 取 的 颜色 值 可 以 在 拾 色 器 而 窗口 中 进行 查看 ， 如 图 9.31 
所 示 。 





EBD 








图 9.31 Photoshop 拾 色 器 展示 效果 
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(4)【 抓 手工 具 】 展 示 为 一 个 小 手 的 样式 咏 。 通过 此 工具 可 以 操作 较 大 的 Photoshop 
图 像 ， 移 动 当 前 位 置 ， 让 指定 的 部 分 能 够 在 可 视 区 中 展示 。 

(5)【 缩 放 工 具 】 展 示 为 一 个 放大 镜 的 样式 图 |。 通过 此 工具 可 以 对 Photoshop 图 像 进 
行 放大 或 缩小 ， 这 样 可 以 方便 地 展示 图 像 的 全 貌 。 


9.6.3 ”辅助 信息 








打开 Photoshop 工具 后 ， 可 以 在 右 侧 看 见 Photoshop 的 辅助 信息 ， 如 图 9.32 所 示 。 


拭 形 迁 框 
当 ” 从 文件 更 新 





9.32 ”Photoshop 辅助 信息 展示 效果 


辅助 信息 面板 可 以 在 【窗口 】 选 项 中 进行 显示 隐藏 操作 。 这 里 只 介绍 与 Photoshop 
切 图 紧密 相关 的 四 个 辅助 信息 面板 。 
(1)【 图 层 】 每 绘制 一 个 图 形 就 会 在 Photoshop 工具 中 生成 一 个 对 应 的 图 层 ， 通 过 单 
击 不 同 的 图 层 可 以 选择 相应 的 Photoshop 图 形 。 还 可 以 通过 拖 动 图 层 的 方式 ， 来 调节 
Photoshop 图 形 在 画布 上 的 显示 层级 。 每 一 个 图 层 前 面 都 会 有 一 个 类 似 于 眼睛 的 小 图 标 
男 |， 通 过 单 击 此 图 标 可 以 对 图 层 进 行 显示 或 隐藏 操作 ， 这 样 可 以 方便 地 进行 Photoshop 
图 形 的 筛选 操作 。 
(2)【 历 史记 录 】Photoshop 图 像 的 每 一 次 操作 ， 都 会 被 记录 到 历史 记录 面板 中 ， 可 
以 通过 选择 历史 记录 还 原 至 之 前 的 操作 步 又， 方便 对 其 进行 重新 修改 。 

《3)【 信 息 】 信 息 面板 会 显示 选 框 工具 框 取 的 区 域 大 小 和 坐标 位 置 , 如 图 9.33 所 示 。 
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精通 


这 样 可 以 非常 方便 地 测量 选取 值 。 


人 


即使 尾 到 最 高 的 山上 ; 
一 次 也 只 能 脚踏实地 地 迈 一 步 。 
干 铎 成 功 心 语 





9.33 ”Photoshop 信息 面板 展示 效果 


(4)【 字 符 】 字 符 面 板 会 显示 与 文字 相关 的 信息 ， 包 括 文字 的 大 小 、 颜 色 、 字 体 等 
样式 ， 如 图 9.34 所 示 。 


ES qianiengjpg 
和 访 打开 
并 


即使 尼 到 最 高 的 山上 ， 


一 次 也 只 能 脚 路 实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 





图 9.34 了 Photoshop 字符 面板 展示 效果 
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9.7 Photoshop 断 图 流程 





Photoshop 切 图 是 Web 前 端 开发 工程 师 必 备 的 一 项 技能 ， 通 过 Photoshop 工具 可 以 
把 由 网 页 设计 师 提 供 的 图 像 进行 切割 ， 从 而 制作 成 网 页 所 需要 的 图 片 。 本 小 节 将 学 习 如 
何 使 用 Photoshop 工具 从 网 页 设计 师 提 供 的 图 像 中 获取 网 页 前 端 开发 过 程 中 所 需要 的 
资源 。 


9.7.1 图 片 格式 切 图 


图 片 格式 主要 有 png、jpg、gif 等 常用 格式 ,一般 情况 下 这 些 格式 的 图 片 可 以 用 作 练 
习 Photoshop 切 图 的 素材 。 首 先 可 以 从 已 有 的 网 站 上 截取 现成 的 网 页 素材 图 进行 练习 操 
作 , 例如 打开 千 锋 官网 (http://www.qfedu.com/), 然后 截取 图 片 , 打开 Photoshop 工具 后 ， 
单 击 【文件 】 一 【新 建 】 通过 按 CtrltV 键 对 刚才 印 屏幕 的 图 像 进 行 粘贴 操作 ， 这 样 就 
可 以 提取 到 千 锋 官网 的 页 面 素材 ， 印 屏幕 展示 效果 如 图 9.35 所 示 。 


文件 [F| 六 每 (日 ”图 你 可 文字 fYj】 选择 (5) 读 塌 个 视图 四 窗口 (W) 帮助 [H) 


岂 中 


样式 : 正常 


i 
7 
到 
LR 
a 
jv 
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文档 :732.3Kj2.19M 大 





9.35 ” 印 屏幕 展示 效果 
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下 面 进行 切 图 操作 ,假设 要 截取 千 锋 动态 板块 下 方 的 banner 图 片 ， 千 锋 动 态 展示 效 
果 如 图 9.36 所 示 。 具 体操 作 步 又 如 下 : 
(1) 单 击 【 选 框 工具 】 命 令 ， 对 获取 的 banner 图 片 进行 选取 操作 ， 可 以 通过 添加 选 
取 和 减少 选取 来 精确 地 测量 出 指定 的 区 域 ， 图 片 选取 展示 效果 如 图 9.37 所 示 。 
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“ 干 锋 VR 培 训 婚 学 员 第 一 天 就 业 首次 面试 15K 战 绩 
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* VR 培 训 学 员 刚 老师 牌 区 : 千 锋 老师 堪 称 一 代 宗师 


9.36 千 锋 动态 展示 效果 


(2) 按 下 CtrltC 键 进行 选取 区 域 的 复制 操作 。 
(3) 按 下 CtrltN 键 进行 新 建 图 层 操作 ， 如 图 9.38 所 示 。 


(4) 在 新 建 
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图 9.38 ”新 建 截取 图 片 展示 效果 
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* 黄河 科技 领导 薛 临 千 锋 为 HTML5 实 训 | 学 员 加 油 
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“ 千 锋 VR 培训 斑 学 员 第 一 天 就 业 首次 面试 15K 战 绩 


9.37 图 片 选取 展示 效果 


复位 | 
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图 像 大 小 : 
492.7K 





图 层 下 ， 按 CtrltV 键 对 将 复制 好 的 图 层 进 行 粘贴 ， 如 图 9.39 所 示 。 


(5) 最 后 对 粘贴 的 图 片 进行 保存 , 至 此 已 完成 Photoshop 工具 的 切 图 操作 , 如 图 9.40 
所 示 。 


9.39 ”新 图 层 粘贴 展示 效果 
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9.40 保存 banner 图 像 展示 效果 
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9.7.2 PSD 格式 切 图 


上 一 小 节 中 介绍 的 切 图 方式 , 一 般 在 练习 切 图 当中 比较 常用 。 但 在 实际 开发 过 程 中 ， 
网 页 设计 师 一 般 会 给 出 Photoshop 设计 图 的 源 文件 格式 ， 即 PSD 格式 的 文件 。PSD 文件 
会 把 制作 的 图 像 进行 多 分 层 处 理 ， 这 样 可 以 更 方便 地 获取 指定 的 图 像 元 素 。 

PSD 格式 的 切 图 方式 与 普通 格式 的 切 图 方式 类 似 。 只 需要 注意 在 指定 的 图 层 下 进行 
切 图 操作 即 可 。 如 截取 图 9.41 中 的 banner 图 像 部 分 ， 有 具体 操作 步骤 如 下 所 述 。 


¥138,.00 


1 答谢 恩师 


【 恒 减 ) 站 站 

ee 汉 村 区 面 ( 500ml ) 

sep ¥196.00 
5) mm ™ 内 

a ¥25.00 





图 9.41 PSD 文件 展示 效果 
(1) 首先 通过 单 击 【 移 动工 具 】 命 令 ， 选 取 想 要 截取 的 图 像 ， 这 样 可 以 在 图 层面 板 
中 选中 当前 元 素 。 注 意 要 勾 选 上 自动 选择 的 复 选 框 国 间 天 昌国 E “]， 这 样 单 击 元 素 才 会 
自动 地 跳 到 指定 的 图 层 上 ， 如 图 9.42 所 示 。 





1 全 网 最 全 从 


[ 轧 痪 】 灵 三 蔡 政 和 





9.42 ”PSD 选取 元 素 展示 效果 
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(2) 其 他 步骤 与 9.7.1 图 片 格式 印 图 的 步骤 完全 一 样 。 
如 果 当 【 选 框 工具 】 没 有 对 应 到 指定 的 图 层 上 ， 就 进行 Ctrl+C 的 复制 操作 ， 会 有 
PSD 复制 失败 提示 信息 ， 如 图 9.43 所 示 。 














9.43 PSD 复制 失败 展示 效果 


9.8 ”Photoshop 妃 图 帘 例 


前 面 的 小 节 中 , 已 经 学 习 了 Photoshop 工具 的 基本 使 用 和 如 何 通 过 Photoshop 工具 进 
行 切 图 处 理 。 在 本 节 中 ， 将 通过 两 个 实例 ， 把 切 图 与 HTML 和 CSS 结合 到 一 起 ， 从 而 
制作 出 完整 的 页 面 效 果 。 

通过 实例 开发 ,将 学 习 如 何 根据 设计 图 进行 HTML 结构 的 搭建 ，CSS 样式 的 精确 设 
置 等 操作 。 


9.8.1 “和 干 锋 动态 ”效果 图 制作 


前 面 小 节 中 ， 通 过 印 屏幕 的 方式 ， 截 取 了 千 锋 官网 上 的 “ 千 锋 动态 ”效果 图 ， 素 材 
如 图 9.44 所 示 。 

下 面 介绍 具体 的 制作 步骤 。 

(1) 首 先 写 HTML 结构 ,将 所 有 元 素 都 放 在 一 个 父 容器 中 , 父 容器 可 分 为 头 部 .banner 
展示 和 列表 三 部 分 ， 具 体 示例 如 下 。 





I <body> 

区 <div class="main"> 

2 <div class="title"></div> 
4 


<div class="banner"></div> 
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<ul class="1ist"></ul> 
6 </div> 
7 </body> 





* 黄河 科技 领导 莅临 千 锋 为 HTML5 实 训 | 学 员 加 油 


* 干 锋 教 育 “ 亮 剑 ” 山 城 重 庆 培育 IT 精美 
~ VR 培 训 学 员 刚 老师 牌 医 : 千 锋 老 师 卉 称 一 代 宗师 
“ 千 锋 VR 培训 旺 学 员 第 一 天 就 业 首次 面试 15K 战 续 


9.44 “ 千 锋 动态 ”效果 图 展示 效果 


头 部 包含 标题 和 链接 两 部 分 ，banner 展示 中 包含 一 张 图 片 ， 列 表 中 包含 四 条 信息 ， 
接 下 来 通过 案例 来 演示 HTML 结构 展示 效果 ， 如 例 9-12 所 示 。 
【 例 9-12】 HTML 结构 展示 效果 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Ps 切 图 实战 </title> 
</head> 
<body> 
<div class="main"> 
<div class="title"> 
<h2> 千 锋 动 态 </h2> 
<a href="#"> 更 多 >></a> 
</div> 
<div class="banner"> 


CooDpp 


FF 
-oo 


pp 
心 w N 


<img src=""> 
</div> 
<ul class="list"> 
<1i> 
<a href="#"> 测 试 文字 测试 文字 测试 文字 1</a> 
< 
= 


Doppp 
oD co OY UT 
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2 <a href="#"> 测 试 文字 测试 文字 测试 文字 2</a> 
22 </1i> 

23 到 [二 > 

24 <a href="#"> 测 试 文字 测试 文字 测试 文字 3</a> 
25 ES 

26 <1i> 

2 <a href="#"> 测 试 文字 测试 文字 测试 文字 4</a> 
28 </1i> 

29 </ul> 

30 </div> 

31 </body> 

32 </html> 


运行 结果 如 图 9.45 所 示 。 








GG |© sile:///D:/HIMLexample/chapter09/9-12. html 





图 9.45 HTML 结构 展示 效果 
至 此 效果 图 的 HTML 结构 已 基本 完成 ， 可 以 继续 添加 CSS 样式 来 完成 整体 效果 
展示 。 
(2) 在 正式 设置 CSS 样式 前 ， 先 要 对 已 有 的 默认 样式 进行 CSS reset 重 置 处 理 。 前 
面 章节 中 介绍 过 一 个 简易 版 的 CSS reset 设置 ， 接 下 来 通过 案例 来 演示 设置 CSS reset 展 
示 效 果 ， 具 体 如 例 9-13 所 示 。 
【 例 9-13】 设置 CSS reset 效果 。 








<style> 
/* CSS reset start */ 
*{ margin:0; padding:0; } 


af text-decoration:none; } 
img{ vertical-align:top; } 


1 

2 

3 

4 li{ list-style:none; } 
5 

6 

/* CSS reset end */ 

8 


</style> 


运行 结果 如 图 9.46 所 示 。 
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9.46 ”设置 CSS reset 展示 效果 


至 此 CSS reset 设置 完成 ， 同 时 也 可 根据 具体 效果 ， 对 CSS reset 方案 进行 调整 。 
(3) Photoshop 工具 切 图 处 理 。 首 先 设置 .main 盒子 的 样式 ， 由 于 列表 项 数目 不 固定 ， 
因此 .main 的 height 需要 自 适 应 ，width 值 通过 【 选 框 工具 】 进 行 量 取 ， 然 后 设置 .main 
的 边框 样式 , 通过 【 滴 管 工具 】 量 取 边框 的 颜色 ;， .main 的 content 内 容 跟 .main 盒子 之 间 
的 左右 空隙 可 以 设置 padding 值 。 这 里 要 注意 根据 CSS 盒 模型 ， 当 量 取 到 padding 值 后 
需要 在 原 有 的 width 基础 上 减 去 padding 值 ， 以 此 来 保证 盒子 的 大 小 。 接 下 来 通过 案例 来 
演示 .main 盒子 设置 样式 ， 具 体 如 例 9-14 所 示 。 
【 例 9-14】 .main 盒子 设置 样式 。 
<style> 
/* CSS reset start */ 
*{ margin:0; padding:0; } 
1i{ list-style:none; } 


img{ vertical-align:top; } 
/* CSS reset end */ 
.main{ width:310px; height:auto; border:1lpx #d7d7d7 solid; 
padding:0 23px 0 23px; } 
10 </style> 


运行 结果 如 图 9.47 所 示 。 


1 
2 
各 
4 
SS af text-decoration:none; } 
6 
理 
8 
9 














9.47 .main 盒子 设置 样式 
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量 取 列表 项 的 文字 大 小 和 行 高 。 当 在 Photoshop 工具 中 量 取 的 文字 大 小 为 奇数 时 ， 
实际 设置 的 大 小 为 加 一 的 数值 ， 如 本 案例 中 量 取 的 文字 大 小 为 1px， 样 式 设置 为 12px。 
行 高 的 测量 可 以 通过 两 行文 字 的 头 部 距离 进行 获取 ， 这 样 就 可 以 通过 拉 取 辅助 线 对 列表 
容器 大 小 进行 确定 处 理 ， 确 定 .list 区 域 如 图 9.48 所 示 。 





* 黄河 科技 领导 巷 临 千 锋 为 HTML5 实 训 | 学 员 加 油 
“ 千 锋 教育 “ 碗 全 ”山城 草 庆 培育 IT 精英 

"VR 培训 学 员 赔 老师 牌 愿 : 千 锋 老师 翰 称 一 代 宗师 
* 千 掺 VR 培训 玻 学 员 第 一 天 就 业 首次 面试 15K 战 续 


9.48 ”确定 .list 区 域 


.list 盒子 与 main 盒子 下 方 的 距离 ， 可 以 设置 成 ,main 盒子 的 下 padding 值 。.list 列表 
项 中 的 “小 点 ”样式 可 以 通过 图 片 进行 模拟 ， 因 此 先 把 “小 点 ”切割 下 来 ， 再 设置 <li> 
的 背景 图 。 注 意 文 字 与 背景 图 之 间 的 空隙， 可 以 通过 <li> 的 左 padding 值 进行 设置 。 接 下 
来 通过 案例 来 演示 .list 盒子 设置 样式 ， 具 体 如 例 9-15 所 示 。 
【 例 9-15】 .list 盒子 设置 样式 。 
<style> 
/* CSS reset start */ 
*{ margin:0; padding:0; } 


li{ list-style:none; } 


I 

2 

加 

4 

5 af text-decoration:none; } 

6 img{ vertical-align:top; } 

加 /* CSS reset end */ 

8 .main{ width:310px; height:auto; border:1lpx #d7d7d7 solid; 
9 padding:0 23px 15px 23px; } 

10 .list{ font-size:12px; line-height:33px; } 

本 -list li{ background:url (point.png) no-repeat 0 center; 
和 padding-left:9px; } 

E3 .list a{ color:#666279; } 

14 </style> 


运行 结果 如 图 9.49 所 示 。 
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已 1@ file: 岂 /0D:/HTIMLexample/chapter0919-15. btml 位 | 3 








于 锋 动态 





9.49 ,list 盒子 设置 样式 


-title 盒子 需要 对 标题 和 链接 进行 左右 浮动 处 理 ， 这 样 可 以 使 之 在 一 行 中 显示 ， 要 注 
意 对 .title 盒子 进行 浮动 处 理 。 量 取 标 题 文 字 的 大 小 和 行 高 ， 设 置 链接 颜色 和 文字 大 小 。 
拉 取 辅助 线 确定 .title 盒子 的 区 域 大 小 ， 如 图 9.50 所 示 。 





* 黄河 科技 领导 蔡 临 千 笑 为 HTML5 实 训 学 员 加 油 
- 千 锋 教育 “ 碗 剑 ” 山 城 章 庆 培育 IT 精 英 

" VR 培 训 人 学员 巾 老师 牌 区 : 千 锋 老师 堪 称 一 代 宗 师 
* 千 锋 VR 培训 理学 员 第 一 天 就 业 首次 面试 15K 战 续 


9.50 ”确定 .title 区 域 


-title 盒子 与 -main 盒子 上 边 的 间距 可 以 通过 给 .main 盒子 设置 上 padding 值 来 实现 ， 
接 下 来 通过 案例 来 演示 .title 盒子 设置 样式 ， 具 体 如 例 9-16 所 示 。 

【 例 9-16】 title 盒子 设置 样式 。 

二 <style> 

2 /* CSS reset start */ 

3 *{ margin:0; padding:0; } 

4 li{ list-style:none; } 
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， 
© File: 1/D:/HTML erarple/ chapter09)/ 9-16. btml 回国 











图 9.51 .title 盒子 设置 样式 


最 后 添加 banner 图 片 和 之 间 的 间距 来 完成 最 终 效果 。 接 下 来 通过 案例 来 演示 “ 千 锋 
动态 ”展示 效果 ， 如 例 9-17 所 示 。 
【 例 9-17】“ 千 锋 动态 ”展示 效果 。 





TML5 从 入 门 到 精通 


运行 结果 如 图 9.52 所 示 。 














9.52 “ 千 锋 动态 ”展示 效果 


9.8.2 “全 国 开 班 ”效果 图 制作 


第 二 个 实例 ， 是 自 千 锋 官网 上 的 “全 国 开 班 ”效果 图 ， 如 图 9.53 所 示 。 
| 全 国 开 班 12 座 城市 无 差别 教学 ， 就 近 选 择 ， 全 国 就 业 


名 1 1 | | | 


北京 上 海 深圳 厂 州 郑州 武汉 


9.53 “全 国 开 班 ”效果 图 展示 效果 


(1) 首先 写 HTML 结构 。 一 个 父 容器 标签 ， 包 含 头 部 和 列表 两 大 部 分 。 头 部 中 包含 
标题 和 说 明 信 息 ， 列 表 中 包含 背景 图 和 城市 信息 。 接 下 来 通过 案例 来 演示 HIML 结构 展 


示 效 果 ， 具 体 如 例 9-18 所 示 。 
【 例 9-18】 HTML 结构 展示 效果 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>PS 切 图 实战 </title><br> 
</head> 
<body> 
<div class="main"> 
<div class="title"> 


comwamnmum 必 wmnNP 
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运行 结果 如 图 9.54 所 示 。 





图 9.54 HTML 结构 展示 效果 


第 章 HTMIL&CSS 实战 279 


(2) CSS reset 设置 ， 与 例 9-7 做 法 类 似 ， 接 下 来 通过 案例 来 演示 CSS reset 样式 重 
具体 如 例 9-19 所 示 。 
【 例 9-19】 CSS reset 样式 重 置 。 


型 


<style> 
/* CSS reset start */ 
*{ margin:0; padding:0; } 


a{ text-decoration:none; } 
img{ vertical-align:top; } 
/* CSS reset end */ 


人 
3 
4 li{ list-style:none; } 
5 
6 
这 
8 </style> 


运行 结果 如 图 9.55 所 示 。 


| rst 





© | © File: VD:/HTMLexanple/chapter0919-19: btal 胡 | 日 











9.55 ”CSS reset 样式 重 置 


(3) Photoshop 工具 切 图 处 理 。 可 以 先 来 设置 头 部 的 样式 ， 拉 取 辅 助 线 先 确定 
头 部 区 域 大 小 ， 量 取 标题 以 及 信息 的 文字 大 小 和 颜色 ， 并 对 其 进行 浮动 处 理 ， 如 图 9.56 
所 示 。 


| 全 国 开 班 12 岩 城市 天 差别 敦 池 ,就 岳 寺 至 ,会 国 就 业 





半 | 1 


虞 上 海 深圳 厂 州 





9.56 “辅助 线 确认 头 部 区 域 
接 下 来 通过 案例 来 演示 :title 盒子 设置 样式 ， 具 体 如 例 9-20 所 示 。 
【 例 9-20】 title 盒子 设置 样式 。 


冰 <style> 
2 /* CSS reset start */ 
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| *{ margin : 07 padding :0; } 

4 li{ list-style : none; } 

af text-decoration : none; } 

6 img{ vertical-align : top; } 

沁 /* CSS reset end */ 

8 -Clear : after{ clear : both; content : ""; display : block; } 
和 :main{ width : 592px; } 

10 -title{ border-left : 3px #3489ff solid; height : 25px; 

于 line-height : 25px; } 

Be -title h2{ float : left; font-size : 20px; margin-left : 10px;} 
3 -title p{ float : left; color : #f73b20; margin-left : 16px;} 


14 </style> 


运行 结果 如 图 9.57 所 示 。 


| rs 





已 | @ sile: /9: /TyL erarple /chaprer09/9-20: html 码 | 3 








| 全 国 开 班 ，12 诬 城市 无 震中 教 和 守 就近 选 树 ， 全 国 新 业 





9.57 .title 盒子 设置 样式 


下 面 来 设置 .list 盒子 的 样式 。 首 先 把 城市 背景 图 做 成 CSS 雪 脾 图， 通过 背景 定位 设 
置 ， 这 样 会 在 一 定 程度 上 提升 网 页 性 能 ;通过 辅助 线 来 确定 .list 盒子 的 区 域 大 小 ， 分 别 
量 取 <li> 的 宽 和 间距 ， 并 对 <li> 项 进行 浮动 处 理 ， 如 图 9.58 所 示 。 


上 | 全 国 开 班 12 和 城市 无 差别 孝 学， 就 近 选 笃 ， 会 国 就 业 





图 9.58 .list 区 域 大 小 和 CSS 雪碧 展示 


最 后 给 列表 的 第 一 项 加 上 选中 效果 来 完成 最 终 效果 。 接 下 来 通过 案例 来 演示 “全 国 
开 班 ” 展 示 效 果 ， 具 体 如 例 9-21 所 示 。 
【 例 9-21】 “全 国 开 班 ” 展 示 效 果 。 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>PS 切 图 实战 </title><br><br> 
<style> 


oroNp 


一 
mewnhP 


于 了 





/* CSS reset start */ 
*{ margin : 0; padding :0; } 
li{ list-style : none; } 
af text-decoration : none; } 
img{ vertical-align : top; } 
/* CSS reset end */ 
Clear’: after{ elear boths content : ~“"> display:: block; } 
-main{ width : 592px; } 
.title{ border-left : 3px #3489ff solid; height : 25px; 
line-height : 25px; } 
.title h2{ float : left; font-size : 20px; margin-left : 10px;} 
.title p{ float : left; color : #f73b20; margin-left : 16px;} 
.list{ border : lpx #b5cde7 solid; padding-top : 8px; 
margin-top : 12px; } 
slist 114 widtlys J5pxr mrgin=Left 5 20pxr" float = Lefty } 
.list div{ height : 42px; background :url(city.png) no-repeat;} 
.list div.cityl{ background-position : center 0; } 
.list div.city2{ background-position : center -42px; } 
.list div.city3{ background-position : center -84px; } 
.list div.city4{ background-position : center -126px; } 
.list div.city5{ background-position : center -168px; } 
.list div.city6{ background-position : center -210px; } 
.list a{ color : #7b7c77; text-align : center; display : block; 
height : 40px; line-height : 40px; } 
.list a.active{ background : #3787ff; color : #fff; } 


</style> 

</head> 

<body> 

<div class="main"> 


<div class="title clear"> 
<h2> 全 国 开 班 </h2> 
<p>12 座 城 市 无 差别 教学 ， 就 近 选 择 ， 全 国 就 业 </p> 
</div> 
<ul class="1ist clear"> 
让 
<div class="cityl"></div> 
<a href="#"> 北 京 </a> 
=A 
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运行 结果 如 图 9.59 所 示 。 





9.59 “全 国 开 班 ” 的 展示 效果 


9.9 本 齐 小 结 


通过 本 章 的 学 习 ， 解 决 实际 开发 的 需求 。 通 过 实际 开发 来 发 现 问题 和 解决 问题 ， 并 


第 章 ”HTML&CSS 实战 


详细 讲解 了 Photoshop 的 基本 使 用 和 Photoshop 切 图 的 流程 。 最 后 通过 两 个 实例 , 把 切 图 
与 HTML、CSS 结合 到 一 起 ， 从 而 制作 出 完整 的 页 面 效 果 。 在 下 一 章节 中 ， 将 继续 学 习 
完整 的 、 常 见 的 网 页 布局 效果 ， 让 读者 能 够 更 好 地 把 理论 知识 和 实际 操作 结合 到 一 起 ， 
从 而 达到 学 以 致 用 的 目的 。 








9.10 司 可 
1， 填 空 题 
(1) 解决 块 元 素 屏幕 居中 问题 需要 设置 值 和 值 为 auto。 
(2) display 值 为 ， 可 以 让 元 素 既 具 备 块 类 型 的 特点 ， 同 时 也 具备 内 联 
类 型 的 特点 。 

(3) 是 使 网 页 合理 的 利用 空间 ， 从 而 展现 更 多 内 容 的 方式 。 
(4) CSS 中 的 属性 可 以 用 来 实现 三 角形 图 标 效果 。 
(5) 内 联 类 型 元 素 的 标签 ， 进 行 居 中 显示 处 理 的 方式 是 
2.， 选择 题 
(1) 解决 “分 页 效果 ”居中 的 处 理 样式 为 〈 沪 

A. text-align:center B. display:inline-block 

C. vertical-align:middle D. float:left 
(2) HTML 标签 利用 哪 种 样式 制作 三 角形 图 标 。(  ) 

A. border B. background 

C. margin D. padding 
(3) 块 元 素 居中 正确 的 样式 为 (  ”)。 

A. margin:0 auto; B. margin:auto 0; 

C. padding:0 auto; D. padding:auto 0; 


(4) 块 元 素 居中 正确 的 样式 为 ( 。”)。 
A. text-align:center B. display:inline-block 

C. margin: 0 auto D. float:left 
(5) 制作 漂亮 的 上 传 按钮 ， 需 要 设置 的 属性 是 〈 5 
B 
D 


A. margin . border 


C. position . display 
3， 思考 题 

(1) 请 简 述 制作 漂亮 的 “上 传 按 钮 ”的 原理 。 

(2) 请 简 述 “标签 切换 页 ”的 基本 结构 。 
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布局 方案 与 整 页 制作 


本 章 学 习 目标 

。 掌握 常见 的 布局 方案 ; 

。 了 解 整 页 开发 的 流程 。 

在 前 面 的 章节 中 ， 已 经 介绍 了 如 何 制 作 各 种 常见 的 网 页 结构 的 操作 。 对 于 整体 页 面 
的 制作 ， 还 需要 注意 一 些 细节 ， 因 此 本 章 将 讲解 如 何 进 行 整体 页 面 的 开发 制作 ， 将 通过 
学 习 网 页 中 多 种 常见 布局 方案 ， 最 终 完成 一 个 整体 页 面 的 制作 ， 从 而 达到 彻底 理解 和 掌 
握 HIML+CSS 搭建 页 面 的 技术 。 


10.1 CSS 布局 


阅读 刊物 时 可 以 发 现 ， 虽 然 刊物 中 的 内 容 很 多 ， 但 经 过 合理 的 排版 ， 版 面 将 会 变 得 
清晰 、 易 读 。 同 理 在 制作 网 页 时 ， 如 果 想 要 使 网 页 结构 清晰 ， 也 需要 通过 CSS 布局 对 网 
页 进行 整理 。 本 节 将 对 常用 的 几 种 CSS 布局 进行 详细 讲解 。 


10.1.1 固定 布局 


固定 布局 是 利用 容器 宽 为 固定 值 的 方式 来 实现 。 固 定 布局 是 最 简单 的 布局 方案 ， 可 
以 分 为 一 列 布局 、 二 列 布局 、 三 列 或 多 列 布局 等 。 


1. 固定 一 列 布局 


固定 一 列 布局 ， 即 一 行 只 显示 一 列 的 布局 方式 ， 容 器 宽度 值 为 固定 值 ， 接 下 来 通过 
案例 来 演示 固定 一 列 布局 ， 具 体 如 例 10-1 所 示 。 
【 例 10-1】 固定 一 列 布局 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 固 定 布局 </title> 
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6 <style> 

他 *{ margin:0; padding:0; font-size:40px; color:white; } 

8 #top{ width:600px; height:100px; background:red; margin:0 auto;} 
9 #content{ width:600px; height:200px; background:red; 

10 margin:20px auto 0 auto; } 

11 </style> 

12 </head> 

13 <body> 


14 <xdiv id="top"> 头 部 </div> 

15 <div id="content"> 内 容 </div> 
16 </body> 

17 </html> 


运行 结果 如 图 10.1 所 示 。 








10.1 固定 一 列 布局 


2， 固定 二 列 布局 


固定 二 列 布局 ， 即 一 行 显示 两 列 的 布局 方式 ， 两 列 容器 宽度 值 都 为 固定 值 ， 左 右 排 
列 需 要 设置 浮动 属性 。 接 下 来 通过 案例 来 演示 固定 两 列 布局 ， 具 体 如 例 10-2 所 示 。 
【 例 10-2】 固定 两 列 布局 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 固 定 布局 </title> 
<style> 
*{ margin:0; padding:0; font-size:40px; color:white; } 


#main{ width:450px; margin:0 auto; } 


Oo pp 


#navigation{ width:200px; height:200px; background:red; 
float:lefts } 
#details{ width:250px; height:200px; background:blue; 


PP 
-oo 
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下 之 floatsleft 小 

13 </style> 

14 </head> 

15 <body> 

16 <div id="main"> 

yl <div id="navigation"> 左 侧 导 航 </div> 
18 <div idq="details"> 右 侧 详情 </div> 

19 </div> 

20 </body> 

ZSI 


运行 结果 如 图 10.2 所 示 。 





ksi 
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侧 导 航 ” 右 侧 详 情 





10.2 ”固定 二 列 布局 


3. 固定 三 列 布局 

固定 三 列 布局 ， 即 一 行 显示 三 列 的 布局 方式 ， 三 列 宽度 值 都 为 固定 值 ， 左 、 中 、 右 
排列 需要 设置 浮动 属性 ， 接 下 来 通过 案例 来 演示 固定 三 列 布局 ， 具 体 如 例 10-3 所 示 。 

【 例 10-3】 固定 三 列 布局 。 


时 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 固 定 布局 </title> 

6 <style> 

时 *{ margin:0; padding:0; font-size:40px; color:white; } 
8 #maim{ width:470px; margin:0 auto; } 

9 #navigation{ width:150px; height:200px; background:red; 
10 float:left> 3} 

于 于 #details{ width:250px; height:200px; background:blue; 
下 有 float:left; } 

13 #aside{ width:70px; height:200px; background:green; 
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14 float:left; } 

15 </style> 

16 </head> 

17 <body> 

18 <div id="main"> 

19 <div id="navigation"> 左 侧 导 航 </div> 
20 <div id="details"> 中 间 详 情 </div> 
5 <div id="aside"> 右 侧 附属 信息 </div> 
EN 

23 </body> 

24 </html> 


运行 结果 如 图 10.3 所 示 。 


ei 
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图 10.3 固定 三 列 布局 


10.1.2 自 适 应 布局 


自 适应 布局 是 利用 容器 宽 为 百分比 或 auto 的 方式 来 实现 , 是 网 页 中 比较 常见 的 布局 
方式 ， 也 可 以 分 为 一 列 布局 、 二 列 布局 、 三 列 或 多 列 布局 等 。 


1， 自 适应 一 列 布局 


自 适应 一 列 布局 通过 给 容器 元 素 设置 宽度 值 为 百分比 或 auto 的 方式 来 实现 。 接 下 来 
通过 案例 来 演示 自 适应 一 列 布局 ， 具 体 如 例 10-4 所 示 。 
【 例 10-4】 自 适 应 一 列 布局 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 自 适应 布局 </title> 
<style> 


ArnoWODNDPp 
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*{ margin:0; padding:0; font-size:40px; color:white; } 
#top{ width:100%; height:50px; background:red; } 
#content{ width:100%; height:100px; background:red; 
margin-top:20px; } 

</style> 

</head> 

<body> 

<div id="top"> 头 部 </div> 

<div id="content"> 内 容 </div> 

</body> 

</html> 


结果 如 图 10.4 所 示 。 


x 
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10.4” 自 适应 一 列 布局 


2. 自 适应 二 列 布局 


自 适应 二 列 布局 可 以 通过 两 列 都 自 适应 和 一 列 自 适应 一 列 固定 两 种 布局 方式 实现 ， 
接 下 来 将 分 别 介绍 这 两 种 实现 自 适应 两 列 布局 的 方式 。 
(1) 首先 介绍 二 列 都 自 适 应 的 布局 方式 ， 接 下 来 通过 案例 来 演示 ， 具 体 如 例 10-5 


所 示 。 


【 例 10-5】 二 列 都 自 适应 的 布局 方式 。 


y 
3 
4 
5 
6 
7 
8 
3 


10 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 自 适应 布局 </title> 

<style> 
*{ margin:0; padding:0; font-size:40px; color:white; } 
#main{ width:100%; } 
#navigation{ width:20%; height:150px; background:red; 

loatleets 
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11 #details{ width:80%; height:150px; background:blue; 
下 和 float:left; } 

13 </style> 

14 </head> 

15 <body> 

16 <div id="main"> 

和 入 <div id="navigation"> 左 侧 导 航 </div> 
18 <div id="details"> 右 侧 详情 </div> 

19 </div> 

20 </body> 

21 </html> 


运行 结果 如 图 10.5 所 示 。 


及 喇 自 应 局 x 
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左 侧 右 侧 详 情 


-一 和 














10.5 ” 自 适 应 二 列 布局 


(2) 下 面 介 绍 一 列 固 定 一 列 自 适 应 的 布局 方式 ， 接 下 来 通过 案例 来 演示 ， 具 体 如 例 
10-6 所 示 。 
【 例 10-6】 一 列 固 定 一 列 自 适 应 的 布局 方式 。 


刘 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 自 适应 布局 </title> 

6 <style> 

汪 *{ margin:0; padding:0; font-size:40px; color:white; } 
8 #main{ width:100%; } 

9 #navigation{ width:200px; height:150px; background:red; 
10 float:left; } 

11 #details{ width:auto; height:150px; background:blue; 
人 margin-left:200px; } 

13 </style> 

14 </head> 

15 <body> 
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16 <div id="main"> 

hy <div id="navigation"> 左 侧 导 航 </div> 
18 <div id="details"> 右 侧 详情 </div> 

19 </div> 

20 </body> 

21 </html> 


运行 结果 如 图 10.6 所 示 。 








Wk 


证 一 


村 口 ia 局 > EC 
已 OFEile: 


侧 导 舰 ” 右 侧 详情 
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10.6 ”一列 固定 一 列 自 适应 


由 图 10.6 可 以 看 到 ， 通过 给 固定 列 的 方式 进行 浮动 处 理 ， 使 固定 列 脱离 文档 流 ， 自 
适应 列 位 于 固定 列 的 右 方 ， 然 后 给 自 适应 列 设置 margin-left 值 为 固定 列 的 宽度 值 ， 这 样 
就 可 以 达到 一 列 固定 一 列 自 适 应 且 左 右 排列 展示 的 布局 效果 。 

除了 通过 浮动 的 方式 可 以 脱离 文档 流 外 ， 还 可 以 利用 绝对 定位 的 方式 来 实现 同样 的 
布局 方式 ， 修 改 上 例 代 码 即 可 ， 示 例 代码 如 下 。 


¥ #navigation{ width : 200px; height : 400px; background : red; 
芝 Bosition :absolute; left 2 07 top 07 

3 #details{ width : autoy height : 400px; background : blue; 

4 margin-left : 200px; } 


3. 自 适 应 三 列 布局 


自 适应 三 列 布局 方案 与 两 个 布局 方案 类 似 ， 但 要 注意 让 固定 的 列 一 定 要 书写 在 
HTML 结构 的 最 后 ， 这 样 才能 利用 脱离 文档 流 的 形式 来 实现 ， 接 下 来 通过 案例 来 演示 ， 
具体 如 例 10-7 所 示 。 

【 例 10-7】 自 适应 三 列 布局 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 自 适应 布局 </title> 
<style> 


CO 必 wb 
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7 *{ margin:0; padding:0; font-size:40px; color:white; } 
8 #main{ width:100%; } 

9 #navigation{ width:200px; height:150px; background:red; 
10 position:absolute; left:0; top:0; } 

11 #aside{ width:150px; height:150px; background:green; float:right; } 
正六 #details{ width:auto; height:150px; background:blue; 

13 margin-left:200px; margin-right:150px; } 

14 </style> 

15 </head> 

16 <body> 

17 <div id="main"> 

18 <div id="navigation"> 左 侧 导 航 </div> 

19 <div ig="aside"> 右 侧 附属 信息 </div> 

20 <div ig="details"> 中 间 详 情 </div> 

21 </div> 

22 </body> 

23 </html> 


运行 结果 如 图 10.7 所 示 。 


喜人 D 自 疾 应 布局 * \ 吕 
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左 侧 导 舰 “ 中 间 详 右 侧 附 


情 属 信息 





图 10.7 自 适应 三 列 布局 


10.1.3 混合 布局 


混合 布局 是 把 不 同 的 布局 方案 结合 到 一 起 ， 来 适应 复杂 的 布局 需求 。 具 体 分 为 如 下 
1. 固定 与 自 适应 混合 
国定 与 自 适应 混合 布局 是 很 常见 的 组 合 方式 ， 如 干 锋 官网 的 头 部 效果 ， 如 图 10.8 
所 示 。 


图 10.8 中 可 以 看 到 内 容 区 域 是 固定 展示 的 ， 而 周围 的 背景 色 是 自 适 应 展示 ， 这 种 方 
式 就 是 固定 与 自 适 应 混合 的 布局 方式 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 10-8 所 示 。 
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图 10.8 千 锋 官网 头 部 效果 


【 例 10-8】 固定 与 自 适应 混合 的 布局 方式 。 
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oem 必 wn 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 泥 合 布局 </title> 

<style> 
*{ margin:0; padding:0; font-size:40px; color:white; } 
#top{ width:100%; height:150px; background:red; } 
#topContent{ width:300px; height:150px; background:blue; 

margin:0 auto; } 

</style> 

</head> 

<body> 

<div id="top"> 
<div id="topContent"> 头 部 内 容 </div> 

</div> 

</body> 

</html> 


运行 结果 如 图 10.9 所 示 。 














10.9 固定 与 自 适应 混合 布局 
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> 


例 10-8 中 通过 嵌 套 标签 的 方式 来 实现 国定 与 自 适应 布局 混合 , 父 容器 采用 自 适 应 布 











局 ， 子 容器 采用 固定 布局 ， 即 可 达到 混合 的 目的 。 





2. 不 同 列 混合 





不 同 列 混合 指 的 是 在 多 行 展示 中 ， 每 一 行 所 展现 的 列 数 可 能 是 不 相同 的 ， 如 优酷 官 


网 的 主体 效果 ， 如 图 10.10 所 示 。 


每 
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10.10 ”优酷 官网 主体 效果 


可 以 看 到 图 10.10 中 ， 每 一 行 的 列 数 都 不 相同 ， 且 排列 也 没 太 多 规则 ， 这 里 需要 对 


-行进 行 单独 的 布局 设置 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 10-9 所 示 。 


【 例 10-9】 不 同 列 混合 布局 方式 。 


<!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 泥 合 布局 </title> 

6 <style> 

7 *{ margin:0; padding:0; font-size:40px; color:white; } 
8 #main{ width:800px; margin:0 auto; } 

9 #videoLeft , #videoCenter , #videoRight{ width:260px; 
10 float:lert; |} 


汪 和 #videoCenter , #videoRight{ margin-left:10px; } 

12 -Video 1{ height:210px; background:red; } 

于 3 -Video 2{ margin-top:10px; overflow:hidden; width:270px; } 
14 -Video 2 div{ float:left; width:125px; height:100px; 

下 background:red; margin-right:10px; } 


16 -Video 3{ overflow:hidden; width:270px; } 
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运行 结果 如 图 10.11 所 示 。 
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10.11 不 同 列 混合 布局 


10.2 蔚 页 制作 


上 一 小 节 中 学 习 了 常见 的 布局 方案 ， 在 本 节 中 将 讲解 开发 一 个 整 页 的 布局 ， 从 规划 
到 制作 的 整 页 制作 设计 图 ， 如 图 10.12 所 示 。 
uc nm } 头 部 


wm rm Wl me [ITED 








mee 


一 上 尾部 











10.12 ” 整 页 制作 设计 图 
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10.2.1 结构 划分 与 公共 样式 


首先 确定 整 页 的 结构 该 如 何 划分 ， 这 样 有 利于 后 期 分 段 处 理 ， 大 概 可 划分 为 头 部 、 
导航 、 广 告 、 列 表 、 信 息 、 尾 部 等 模块 。 

然后 提取 整 页 中 公共 部 分 的 样式 , 这 样 做 的 好 处 是 可 以 复 用 样式 代码 , 节省 代码 量 ， 
提高 性 能 。 如 网 页 中 清除 浮动 的 .clear 样式 就 是 公共 样式 ， 同 样 CSS reset 部 分 也 是 属于 
公共 部 分 的 样式 。 

结构 划分 和 公共 样式 都 确定 好 后 ， 可 以 先 通过 注释 的 方式 ， 把 区 域 确定 出 来 ， 以 便 
后 续 操作 。 示 例 代码 如 下 。 





<style> 
/* 公共 样式 */ 
*{ margin : 0; padding : 0; } 
body{ font-size : 12px; } 


img{ border : none; vertical-align : top; } 
a{ text-decoration : none; color : inherit; } 
.Clear:after{ content : ""; display : block; clear:both;} 
/* 头 部 样式 */ 
T0 /* 导航 样式 */ 
了 /* 广告 样式 */ 
T2 /* 列表 样式 */ 
3 /* 信息 样式 */ 
4 /* 尾部 样式 */ 
5 </style> 
6 <body> 
7 
8 
9 


1 
2 
3 
4 
5 li{ list-style : none; } 
6 
这 
8 
9 


<!-- 头 部 结构 --> 
<!-- 导航 结构 --> 
<!-- 广告 结构 --> 
20 “<!-- 列表 结构 --> 
21 <!-- 信息 结构 --> 
22 <!-- 尾部 结构 --> 
23 </body> 





10.2.2 ”网 页 模块 命名 规范 


网 页 模块 的 命名 ， 如 果 没 有 统一 的 命名 规范 对 其 进行 必要 的 约束 (自由 地 命名 )， 
会 使 后 续 工 作 难 以 进行 。 因 此 ， 命 名 规范 很 重要 ， 读 者 应 予以 重视 。 通 常 网 页 模块 的 命 
名 需要 遵循 以 下 三 个 原则 : 

。 命名 避免 使 用 中 文字 符 ( 如 id=“ 内 容 ”); 
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。 命名 不 能 以 数字 开头 〈 如 id=“1lheader”); 

。 命名 不 能 使 用 关键 字 (如 id=“div”)。 

命名 应 尽量 用 最 少 的 字母 表达 含义 ， 使 之 简明 、 易 懂 。 
在 网 页 开发 中 , 常用 驼峰 式 命名 和 帕斯卡 命名 两 种 命名 方式 。 其 具体 解释 如 下 所 述 。 
。 驼峰 式 命名 : 除 第 一 个 单词 外 后 面 的 单词 首 字母 都 要 大 写 , 其 余 小 写 , 如 navOne。 
。 帕斯卡 命名 : 每 个 单词 之 间 用 “ “连接 ， 如 nav_one。 

下 面 列举 网 页 中 常用 的 一 些 命名 ， 具 体 如 表 10.1 所 示 。 



































表 10.1 常用 命名 

命 名 模 块 命 名 
header 标签 页 tab 
content/container 文章 列表 list 
footer 提示 信息 msg 
nav 小 技巧 tips 
subnav 栏目 标题 title 
sidebar 加 入 joinus 
column 指南 guild 
left right center 服务 service 
loginbar 注册 regsiter 
logo 状态 status 
banner 投票 vote 
main 合作 伙伴 partner 
hot CSS 文件 命名 
news 主要 的 master.css 
download 模块 module.css 
menu 基本 共用 base.css 
submenu 布局 ， 版 面 layout.css 
search 主题 themes.css 
frIEndlink 专栏 columns.css 
header 文字 font.css 
footer 表单 forms.css 
copyright 补丁 mend.css 
scroll 打印 print.css 








10.2.3” 头 部 制作 


头 部 采用 固定 布局 方案 ， 通 过 Photoshop 工具 可 测量 出 容器 大 小 为 950px。 头 部 包 
含 logo 和 菜单 两 部 分 ， 其 HTML 结构 实现 ， 示 例 代码 如 下 。 

1 <body> 

2 的 > 


3 <div id="header"> 
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4 <a class="logo" href="#"><img src="logo.png"></a> 
与 <ul> 

6 <1i><a href="#"> 中 文 </a></1i> 

<li><a href="#">English</a></1i> 

8 <1i><a href="#">asdsad</a></1i> 

人 <li><a href="#">xcxc</a></1i> 

10 <li><a href="#">cccccc</a></1i> 

和 于 <li><a href="#">ydjfdf</a></1i> 

12 <1i class="line">|</l1i> 

13 <li class="mobile"><a href="#"> 手 机 版 </a></1i> 
14 </ul> 

15 </div> 

16 </body> 


logo 的 位 置 可 以 通过 盒子 模型 的 margin 值 来 控制 。 菜单 的 父 容器 采用 右 浮 动 , 菜单 
子 项 采用 左 浮动 ， 这 样 菜单 可 以 采用 整体 靠 右 的 形式 进行 排序 。 菜 单项 的 文字 与 图 标 之 
间 的 空 陀 可 以 通过 盒子 模型 的 padding 属性 来 调整 ， 具 体 如 例 10-10 所 示 。 

【 例 10-10】 头 部 制作 。 


年 3 


<style> 


/* 头 部 样式 */ 
#header{ width : 950px; margin : 0 auto; height : 74px; } 
-logo{ float ': left; margin : 19px 0 0' 1px; 1 
#header ul{ float : right; line-height : 20px; 
margin-top : 37px; } 
#header li{f float : left; color : #888888; 
padding-left : 13px; margin-left : 21px; 
background : url (img/headerUlBg.png) no-repeat 0 center; } 
#header .line{ background : none; padding : 0; 
margin-left : 14px; } 
#header .mobile{ background : url (img/headerUlMobile.png) no-repeat 
OPSpx2 


14 </style> 


其 头 部 结果 如 图 10.13 所 示 。 
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图 10.13” 头 部 制作 展示 效果 


10.2.4 ”导航 制作 


导航 部 分 采用 混合 布局 方式 ， 里 面 的 内 容 是 固定 布局 ， 父 容器 是 自 适应 布局 。 导 航 
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分 为 左边 的 主导 航 、 右 侧 的 分 享 导航 和 下 方 的 子 导航 。 其 实现 HTML 结构 ， 示 例 代 码 
如 下 。 


主导 航 整体 左 浮动 ， 分 享 导航 整体 右 浮动 。 这 里 要 注意 ， 主 导航 有 个 选中 的 状态 ， 
需要 添加 一 个 单独 的 样式 ， 即 active 样式 。 具 体 代 码 如 下 。 
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TCR -Mi -door -or oo pd | DFR 





图 10.14 导航 制作 展示 效果 


10.2.5 广告 制作 


广告 主要 以 图 片 展 示 为 主 ，HTML+CSS 结构 都 比较 简单 ， 属 于 一 列 布局 方式 , 具体 
代码 如 下 。 





展示 效果 如 图 10.15 所 示 。 
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UC 浏 览 器 开发 调试 工具 即将 发 布 ， 敬 请 期 待 ! 


图 10.15 广告 制作 展示 效果 


10.2.6 ”列表 制作 


列表 属于 三 列 固定 布局 ， 采 用 浮动 + 固定 宽 的 方式 来 实现 。 根 据 不 同 的 展现 内 容 ， 
采用 合理 的 语义 化 标签 展示 。 其 实现 HTML 结构 ， 代 码 示 例如 下 。 


让 <body> 

2 <! 一 列表 结构 --> 

3 <ul class="]list clear"> 

4 <1i> 

5 <h2> 技 术 文档 区 </h2> 

6 <p class="pl">UC 浏览 器 </p> 

7 <p> 文 本 对 基于 文本 对 基于 文本 对 基于 文本 对 基于 文本 对 基于 文本 对 基于 文本 对 基于 
8 文本 对 基于 文本 对 基于 文本 对 基于 文本 对 基于 文本 对 基于 </p> 
9 <img class="imgl" src="img/listBtn.png"> 

10 </Ti> 

下 二 区 

2 <h2> 演 示 发 布 区 </h2> 

13 <div> 

14 <p><a href="#"> 基 于 重力 感应 </a></p> 

5 <p> 主 要 特点 :canvas+</p> 

16 <p> 手 机 测试 地 址 </p> 

入 </div> 

18 <div> 

5 <p><a href="#"> 基 于 重力 感应 </a></p> 

20 <p> 主 要 特点 :canvas+</p> 


2 <p> 手 机 测试 地 址 </p> 
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之 公 </div> 

2 <div> 

24 <p><a href="#"> 基 于 重力 感应 </a></p> 

4 <p> 主 要 特点 :canvas+</p> 

26 <p> 手 机 测试 地 址 </p> 

27 </div> 

28 <img class="img2" src="img/listBtn2.png"> 
29 </13> 

30 Ra 

3 <h2> 人 性 能 发 布 区 </h2> 

3 六 <p> 主 要 特点 :canvas+</p> 

33 <p> 主 要 特点 :canvas+</p> 

34 <p> 主 要 特点 :canvas+</p> 

35 <p> 主 要 特点 :canvas+</p> 

36 <img class="img3" src="img/listImg.png"><br> 
37 <a class="more" href="#"> 查 看 详细 >></a> 
38 让 中 人 

39 </ul> 

40 </body> 


代码 中 用 到 一 个 CSS3 中 操作 子 项 的 方法 ， 即 nth-of-type， 这 个 可 以 针对 一 组 元 素 
进行 不 同样 式 的 操作 。 此 操作 会 在 CSS3 章节 中 进行 详细 讲解 ， 这 里 先 暂 时 使 用 一 下 。 
下 面 将 演示 CSS 演示 代码 ， 在 例 10-10 中 添加 代码 如 下 。 


<style> 
旬 /* 列表 样式 */ 
3 -list{ border-left : lpx #d3d3d3 solid; margin : 15px 0; } 
4 -list al float < left; width : 315px; height :< 387px: 
5 border : lpx #d3d3d3 solid; border-left : none; } 
6 .list li h2{ line-height : 49px; font-size : 18px; 
2 padding-left : 90px; margin : 22px 0 llpx 0; } 
8 .list li:nth-of-type(1) h21{ 
9 background : url(img/listH2Bgl.png) no-repeat 31lpx 0; } 
.list li:nth-of-type(2) h2{ 
1 background : url (img/listH2Bg2.png) no-repeat 31lpx 0; } 
he .list li:nth-of-type(3) h21{ 
background:url (img/listH2Bg3.png) no-repeat 3lpx 0; } 
.list li p{ padding-left : 30px; padding-right : 35px; 
line-height : 24px; color : #666666; } 
ist i p al color : blue? 于 
-list li .pl{ color < black; tont=weight < bold; } 
.list li .imgl{ margin : llpx 0 0 30px; } 





WB CO) yO Cn wh Oo 


.list 1i .img2{ margin : -6px 0 0 30px; } 
20 -lst 1 cng3t Mardyin Left S 30px2 


第 章 ”布局 方案 与 整 页 制作 303 


之 -listli .more{margin-left:30px; line-height:27px; color : blue;} 
22 -list li div{ margin-bottom : 15px; } 
23 </style> 


展示 效果 如 图 10.16 所 示 。 
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UC 浏 览 吉 开 发 调试 工具 即将 发 布 ， 歌 请 期 得 ! 


10.16 ”列表 制作 展示 效果 


10.2.7 ”信息 制作 


消息 区 域 采用 两 列 固定 布局 来 实现 。 一 列 靠 左 ， 一 列 靠 右 ， 这 里 HTML+CSS 比较 
简单 ， 直 接 演示 代码 ， 在 例 10-10 中 添加 代码 如 下 。 


本 <style> 

2 /* 信息 样式 */ 

1 -message{ margin-top : 1l5px; } 

4 -messageL{ width : 600px; float : left; 

border-top : lpx #dbdbdb solid; } 

6 .messageR{ width : 310px; float : right; } 

.messageL h2 , .messageR h2{ font-size : 14px; height : 36px; 
8 line-height : 32px; margin-top : -lpx; 

9 background : url(img/messageH2Bg.png) no-repeat; } 
10 -messageL p , -messageR p{ line-height : 22px; } 

生生 -messageL af color : blue; } 

By -messageL div{ margin-bottom : 22px; } 
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-messageL 1i{ line-height : 28px; padding-left : 20px; 
background : url(img/messageUlBg.png) no-repeat 0 center; } 
.messageR div{ border-top:1lpx #dbdbdb solid; margin-bottom:20px; } 
-messageR span{ color : #ff6600; } 
-messageR ul{ margin-top : 1l5px; } 
-messageR 1i{ line-height : 22px; } 
-messageR li af color : blue; padding-left : 6px; 
background : url(img/messageUlBg2.png) no-repeat 0 center; } 
</style> 
<body> 
<!-- 信息 结构 --> 
<div class="message clear"> 


<div class="messageL"> 
<h2>UC 浏览 器 开放 参数 介绍 </h2> 
<div> 
<p> 参 数 介绍 </p> 
<p> 参 数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 
介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 
介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 
介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 </p> 
</div> 
<div> 
<p> 参 数 介 绍 </p> 
<p> 参 数 介绍 绍 参 数 介 绍 绍 <a href="#"> 单 击 下 载 </a></p> 
<p> 参 数 介绍 绍 参数 介绍 绍 </p> 
</div> 
<div> 
<p> 相 关 资 料 下 载 </p> 
<ul> 
<1i><a href="#">UC 浏览 器 UC 浏览 器 UC 浏览 器 </a></1i> 
<1i><a href="#">UC 浏览 器 UC 浏览 器 UC 浏览 器 </a></1i> 
<1i><a href="#">UC 浏览 器 UC 浏览 器 UC 浏览 器 </a></1i> 
</ul> 
</div> 
</div> 
<div class="messageR"> 
<div> 
<h2> 联 系 方式 </h2> 
<p> 联 系 邮箱 : <span>aaaa@qq.com</span></p> 
<p> 联 系 邮箱 : <span>aaaa@qq.com</span></p> 
</div> 
<div> 
h2> 联 系 方式 </h2> 
<p> 参 数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 
介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 介绍 参数 
介绍 参数 介绍 参数 介绍 </p> 
<ul> 
<1i><a href="#"> 参 数 介 绍 参数 介绍 参 </a></1i> 
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61 <1i><a href="#"> 参 数 介 绍 参 数 介绍 参 </a></1i> 
62 <1i><a href="#"> 参 数 介绍 参数 介绍 参 </a></1i> 
63 <1i><a href="#"> 参 数 介 绍 参 数 介 绍 参 </a></1i> 
64 </ul> 

65 </div> 

66 </div> 

67 </div> 

68 </body> 


展示 效果 如 图 10.17 所 示 。 
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10.17 ”信息 制作 展示 效果 


10.2.8 尾部 制作 


尾部 部 分 与 导航 部 分 类 似 ， 同 样 采用 混合 布局 的 方式 ， 即 内 容 区 域 采 用 固定 布局 ， 
父 容器 采用 自 适 应 布局 。 这 里 介绍 的 HTML+CSS 比较 简单 ， 在 例 10-10 中 添加 如 下 
代码 。 
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<style> 
/* 尾部 样式 */ 
#footer{ width : 100%; height : 85px; background : #d6d6d6; 
margin-top : 3px; } 
.footerContent{ width : 950px; margin : 0 auto; 
position : relative; padding-top : 25px; } 
.footerContent .map{ position : absolute; right : 0; top : 0; } 
.footerContent p{ line-height:22px; text-align:center; 
Color:#666666; } 
</style> 
<body> 
<!-- 尾部 结构 --> 
<div id="footer"> 
<div class="footerContent"> 
<div class="map"> 
<a href="#"><img src="img/footerBtn.png"></a> 
</div> 
<p>2004-2017 广州 市 动 景 计算 机 科技 有 限 公司 版 权 所 有 </p> 
<p> 中 华人 民 共 和 国 互联 网 药品 信息 服务 资格 证 :( 粤 )- 非 经 营 性 -2011-0120 </p> 
</div> 
</div> 
</body> 


展示 效果 如 图 10.18 所 示 。 





10.18 ”尾部 制作 展示 效果 


第 章 ， 布局 方案 与 整 页 制作 307 


10.3” 测 览 器 莱 容 性 





由 于 某 些 因素 , 不同 的 浏览 器 不 能 完全 地 采用 统一 的 Web 标准 , 或 者 说 不 同 的 浏览 
器 对 于 同一 个 网 页 有 不 同 的 解析 ， 因 此 会 导致 同一 个 网 页 在 不 同 的 浏览 器 下 的 显示 效果 
可 能 不 同 。 为 了 保证 页 面 的 统一 ， 往 往 需要 对 网 页 进行 浏览 器 兼容 问题 的 调试 。 本 节 将 
以 谷歌 、 焉 两 个 浏览 器 为 例 ， 对 浏览 器 兼容 性 问题 的 调试 方法 进行 详细 讲解 。 




















10.3.1 CSS Hack 


解决 浏览 器 的 兼容 性 问题 ,通常 需要 通过 CSS 样式 来 调试 ， 最 常用 的 是 CSS Hack。 
CSS Hack 是 为 不 同 版 本 的 浏览 器 定制 编写 不 同 的 CSS 效果 ， 使 用 每 个 浏览 器 单独 识别 
的 样式 代码 ， 控 制 浏览 器 的 显示 样式 。CSS Hack 主要 分 为 CSS 选择 器 Hack 和 CSS 属 
性 Hack 两 类 ， 下 面 将 详细 介绍 这 两 类 CSS Hack。 


1. CSS 选择 器 Hack 


CSS 选择 器 Hack 是 通过 在 CSS 选择 器 前 ， 加 上 只 有 特定 浏览 器 才能 识别 的 Hack 
前 级 ， 从 而 控制 不 同 的 CSS 样式 。 针 对 不 同 版 本 的 浏览 器 ,选择 器 Hack 分 为 以 下 两 类 : 

(1) IE6 及 IE6 以 下 版 本 的 浏览 器 可 以 识别 的 选择 器 Hack 

编写 CSS 样式 代码 时 , 如果 想 要 此 样式 只 是 针对 IE6 及 焉 6 以 下 版 本 的 浏览 器 生效 ， 
可 以 使 用 IE6 及 以 下 版 本 的 选择 器 Hack， 其 语法 格式 如 下 : 

*html 选择 器 {样式 代码 } 


接 下 来 通过 案例 来 演示 IE6 及 IE6 以 下 版 本 识别 的 选择 器 Hack 的 使 用 ， 具 体 如 例 
10-11 所 示 。 
【 例 10-11】 IE6 及 IE6 以 下 版 本 识别 的 选择 器 Hack 的 使 用 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 浏 览 器 兼容 性 </title> 

<style> 
.boxColor{ width:100px; height:100px; background-color:red; } 
*html .boxColor{ width:200px; height:100px; background-color:blue; } 

</style> 

</head> 

<body> 

<div class="boxColor"></div> 
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13 </body> 
14 </html> 


在 Chrome 和 正 6 浏览 器 中 的 运行 结果 分 别 如 图 10.19 和 图 10.20 所 示 。 








口 浏览 器 兼容 性 D: HTML example chiapter 10\10-11.html 
© |Q© sile:///t 








图 10.19 Chrome 浏览 器 显示 效果 图 10.20 IE6 浏览 器 显示 效果 


例 10-11 中 ， 第 8 行 代码 应 用 正 6 及 正 6 以 下 版 本 识别 的 选择 器 Hack“*html . 
boxColor” 将 元 素 的 宽 设 置 为 200 px， 高 设置 为 100px， 背 景色 设置 为 蓝 色 。 图 10.19 显 
示 在 Chrome 浏览 器 中 的 元 素 背景 色 为 红色 , 而 图 10.20 显示 在 正 6 浏览 器 中 的 元 素 背 景 
色 为 蓝 色 。 因此 例 10-16 中 通过 选择 器 Hack 定义 的 样式 只 是 针对 IE6 及 IE6 以 下 版 本 的 

浏览 器 生 
(2) 只 有 正 7 浏览 器 可 以 识别 的 选择 器 Hack 
编写 CSS 样式 代码 时 ， 如 果 此 样式 只 是 针对 正 7 浏览 器 生效 ， 可 以 使 用 只 有 IE7 识 
oie Hack， 其 语法 格式 如 下 : 
*+html 选择 器 {样式 代码 } 


接 下 来 通过 案例 来 演示 只 有 IE7 识别 的 选择 器 Hack 的 使 用 ， 具 体 如 例 10-12 所 示 。 
【 例 10-12】 只 有 正 7 识别 的 选择 器 Hack 的 使 用 。 


下 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 浏 览 器 兼容 性 </title> 

6 <style> 

.boxColor{ width:100px; height:100px; background-color:red; } 
8 *+htm] .boxColor{ width:200px; height:100px; background-color:blue; } 
9 </style> 

10 </head> 

11 <body> 

12 <div class="boxColor"></div> 

13 </body> 

14 </html> 


在 不 同 浏览 器 中 运行 结果 如 图 10.21 一 10.24 所 示 。 
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口 浏览 器 兼容 性 
C |Q© file: 


D: HIMLexample hapter10\10-12.html 








图 10.21 Chrome 浏览 器 显示 效果 图 10.22 IE6 浏览 器 显示 效果 


十 is 和 袜 性 x | > 
|D: HIML example \Hhiapter 11\11-12.html 








10.23 IE8 浏览 器 显示 效果 图 10.24 IE7 浏览 器 显示 效果 


例 10-12 中 ， 第 8 行 代 码 应 用 只 有 下 7 浏览 器 识别 的 选择 器 Hack“*+html .content” 
将 元 素 的 宽 设 置 为 200px， 高 设置 为 100px， 背 景色 设置 为 蓝 色 。 由 图 10.21~ 图 10.24 可 
以 看 出 ，Chrome、IE6、IE8 浏览 器 元 素 背 景色 均 显 示 为 红色 ， 但 IE7 浏览 器 元 素 背 景色 
显示 为 蓝 色 ， 因 此 ， 定 义 的 CSS 选择 器 Hack 只 对 IE7 浏览 器 生效 。 

2. CSS 属性 Hack 


CSS 属性 Hack 是 通过 在 CSS 属性 名 前 加 上 只 有 特定 浏览 器 才能 识别 的 Hack 前 绥 ， 
如 “_size: 300px” 中 的 Hack 前 级 “_” 只 对 IE6 浏览 器 生效 。 下 面 介绍 针对 不 同 版 本 
的 浏览 器 ，CSS 属性 Hack 中 的 两 类 。 

(1) IE6 及 IE6 以 下 版 本 的 浏览 器 可 以 识别 的 属性 Hack 

编写 CSS 样式 代码 时 ， 如 果 想 要 此 样式 只 对 IE6 及 IE6 以 下 版 本 的 浏览 器 生效 ， 可 
以 使 用 IE6 及 IE6 以 下 版 本 的 CSS 属性 Hack， 其 语法 格式 如 下 : 

_ 属 性 : 样式 代码 ; 


(2) IE7 及 IE7 以 下 版 本 的 浏览 器 可 以 识别 的 属性 Hack 
编写 CSS 样式 代码 时 ， 如 果 想 要 此 样式 只 对 IE7 及 下 7 以 下 版 本 的 浏览 器 生效 ， 可 
以 使 用 IE7 及 IE7 以 下 版 本 的 CSS 属性 Hack， 其 语法 格式 如 下 : 


+ 或 * 属 性 : 样式 代码 ; 





接 下 来 通过 案例 来 演示 CSS 属性 Hack 的 使 用 ， 具 体 如 例 10-13 所 示 。 
【 例 10-13】 CSS 属性 Hack 的 使 用 。 
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下 <!dqoctype html> 

2 <html> 

各 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 浏 览 器 兼容 性 </title> 

6 <style> 

-divHack{ width:100px; height:100px; 

8 background-color:#F00; /* 支 持 所 有 浏览 器 */ 

9 *background-color:#FF6; /* 支 持 IE7 及 IE7 以 下 浏览 器 */ 
10 +background-color:#000; /* 支 持 IE7 及 IE7 以 下 浏览 器 */ 
| _background-color:#0F0; }  /* 支 持 IE6 及 IE6 以 下 浏览 器 x*/ 
12 </style> 

13 </head> 

14 <body> 

15 <div class="divHack"></div> 

16 </body> 

17 </html> 

在 不 同 浏览 器 中 的 运行 结果 如 图 10.25 一 图 10.28 所 示 。 
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图 10.25 
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Chrome 浏览 器 显示 效果 各 10.26 ”IE6 浏览 器 显示 效果 
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9 10.27 


例 10-13 中 ， 
10.28 可 以 看 出 ， 





IE7 浏览 器 显示 效果 图 10.28 IE8 浏览 器 显示 效果 


在 第 8~11 行 代 码 中 定义 了 一 些 常用 的 CSS 属性 Hack。 由 图 10.25~ 图 
在 Chrome 和 正 8 浏览 器 中 元 素 背景 色 显 示 为 红色 ， 在 下 6 浏览 器 中 元 








素 背 景色 显示 为 绿色 ，IE7 浏览 器 中 元 素 背 景色 显示 为 黑色 。 
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上 注意 : 

CSS Hack 能 够 针对 不 同 的 浏览 器 编写 不 同 的 CSS 样式 代码 ， 从 而 实现 兼容 最 大 化 。 
但 当 多 次 重复 定义 CSS 样式 时 ， 浏 览 器 会 默认 执行 最 后 定义 的 样式 ， 因 此 ， 在 使 用 CSS 
Hack 时 ， 一 定 要 按照 浏览 器 版 本 从 高 到 低 的 顺序 编写 样式 。 

下 面 列举 一 些 CSS Hack， 如 表 10.2 和 表 10.3 所 示 。 


表 10.2 选择 器 Hack 

针对 的 浏览 器 
只 对 正 6、IE7 有 效 
只 对 正 8 有 效 
只 对 下 6、IE7、 正 8 有 效 
只 对 正 8、IE9、 正 10 有 效 


选择 器 Hack 写法 
(@media screen\9 {body{ 样 式 代码 }} 
(@media \0screen {body {样式 代码 }} 
(@media \0screen\,screenm\9{body {样式 代码 }} 
@media screen\0{body{ 样 式 代码 }} 

















(@media csreen and (-ms-high-contrast:active), 只 对 正 10 有 效 
(-ms-high-contrast:name) {body {样式 代码 }} 
表 10.3 属性 Hack 
CSS 属性 Hack( 前 缀 ) 针对 的 浏览 器 

_color:red; IE6 及 其 以 下 的 版 本 

*color:red; 或 +color:red; IE7 及 其 以 下 的 版 本 

color:red\9 IE6、IE7、IE8、IE9、IE10 版 本 

color:red\0 IE8、IE9、 正 10 版 本 

color:red\0\9 IE9、 IE10 

colorredlimportant IE7、IE8、IE9、 正 10 及 其 他 非 正 浏览 器 


10.3.2 IE 条 件 注释 语句 


在 开发 中 ， 正 浏览 器 的 兼容 性 问题 比较 多 ， 经 常 需 要 对 其 兼容 性 进行 调试 ， 因 此 ， 
微软 官方 专门 提供 了 “下 条 件 注释 语句 ”*。“IE 条 件 注释 语句 ”是 专门 针对 正 浏览 器 的 
Hack， 对 于 不 同 版 本 的 正 浏览 器 ， 编 写 方法 也 不 同 ， 其 主要 包括 判断 浏览 器 类 型 的 条 
件 注释 语句 和 判断 正版 本 的 条 件 注释 语句。 

1. 判断 浏览 器 类 型 的 条 件 注释 语句 


判断 浏览 器 类 型 的 条 件 注释 语句 用 于 判断 浏览 器 类 型 是 否 为 正 浏览 器 , 其 基本 语法 
格式 如 下 : 

< -=iE EES 

只 能 被 IE 浏览 器 识别 

<![end if] --> 

其 中 ， 第 一 行 中 的 正 代表 浏览 器 的 类 型 ， 表 示 该 条 件 注 释 语句 只 能 被 正 浏览 器 


识别 。 
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2. 判断 IE 版 本 的 条 件 注释 语句 
判断 正版 本 的 条 件 注释 语句 用 于 判断 正 浏览 器 的 版 本 ， 其 基本 语法 格式 如 下 : 


<!--[if IE6]> 
只 能 被 IE6 浏览 器 识别 


<![end if]--> 


其 中 ， 第 一 行 的 正 7 代表 正 浏览 器 的 版 本 号 ， 表 示 该 注释 语句 只 能 被 当前 正版 本 





浏览 器 识别 。 


下 面 列举 一 些 常用 的 下 条 件 注释 语句 ， 如 表 10.4 所 示 。 
表 10.4 IE 条 件 注释 语句 


IE 条 件 注释 语句 针对 的 浏览 器 版 本 
<L-[fltIE7> 内 容 <l[endifj-> IE7 以 下 的 版 本 
<!--[if lte IE7]> 内 容 <![endifl--> IE7 及 其 以 下 的 版 本 
<!--[fgtIE7]> 内 容 <![endifl--> IE7 以 上 版 本 
<!--[if gte IE7]> 内 容 <![endif]--> IE7 及 其 以 上 版 本 
<!--[fITE7]> 内 容 <![end 计 --> 非 下 7 版 本 
<1--[ 站 !IE]><!--> 内 容 <!--<![endif]--> 非 正 浏览 器 


表 11.4 中 出 现 了 1t、lte、gt、gte 和 ! 等 字母 符号 。 

。 gt(greater than): 选择 条 件 版 本 以 上 版 本 ， 不 包含 条 件 版 本 。 

。 lt(less than): 选择 条 件 版 本 以 下 版 本 ， 不 包含 条 件 版 本 。 

。 gte(greater than or equal): 选择 条 件 版 本 以 上 版 本 ,包含 条 件 版 本 。 
. a than or equal): 选择 条 件 版 本 以 下 版 本 ， 包 含 条 件 版 本 。 

。 !: 选择 条 件 版 本 以 外 的 所 有 版 本 ， 无 论 高 低 。 


10.3.3 常见 IE6 浏览 器 的 兼容 性 问题 


在 实际 开发 工作 中 ， 出 现 浏览 器 兼容 性 问题 比较 多 的 浏览 器 是 IE6 浏览 器 ， 本 小 节 


将 列举 一 些 常 见 的 下 6 浏览 器 兼容 性 问题 及 解决 方法 。 


1. IE6 浏览 器 显示 多 余 字 符 问题 
在 IE6 浏览 器 中 ， 当 两 个 浮动 元 素 之 间 加 入 HTML 注释 时 ,会 产生 多 余 字符 。 接 下 


来 通过 案例 来 演示 ， 具 体 如 例 10-14 所 示 。 


【 例 10-14】 IE6 浏览 器 显示 多 余 字 符 问题 。 


<!doctype html> 
<html> 


<head> 


心 w_ N 


<meta charset="utf-8"> 
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<title> 浏 览 器 兼容 性 </title> 
<style> 
-Content{ width:100px; } 
-Content div{ float:left; width:100px; } 
</style> 
</head> 
<body> 
<div class="content"> 
<div class="one"> 做 真实 的 自己 ，</div> 
<!-- 浮 动 元 素 之 间 加 入 HTML 注释 --> 
<div class="two"> 用 良心 做 教育 。</div> 
</div> 
</body> 
</html> 


在 Chrome 和 了 E6 浏览 器 中 运行 结果 分 别 如 图 10.29 和 图 10.30 所 示 。 


Fr HTMLexample chapter10\10-14.html 
做 真实 的 自 


Bl 周 良心 做 教 
| Rrvtiak 好 
育 . 








图 10.29 ”Chrome 浏览 器 显示 效果 图 10.30 ”IE6 浏览 器 显示 效果 


由 图 10.29 和 图 10.30 可 以 看 出 ， 在 Chrome 浏览 器 中 显示 正常 ， 在 IE6 浏览 器 中 多 
出 一 个 字符 。 这 种 解决 正 6 浏览 器 的 兼容 问题 ， 有 三 个 解决 方法 ， 具 体 如 下 : 


删除 HTML 注释 ; 
在 产生 多 余 字 符 的 标签 的 CSS 样式 中 添加 “position:relative” 样 式 ; 
不 设置 浮动 div 的 宽度 。 





本 案例 使 用 第 三 个 方法 解决 例 10-14 中 的 问题 ， 修 改 CSS 代码 如 下 : 


<style type="text/css"> 


.content{ width:100px; } 
-content div{ float:left; } 


</style> 


保存 HTML 文件 ， 刷 新 网 页 ， 在 Chrome 和 IE6 浏览 器 的 效果 分 别 如 图 10.31 和 图 
10.32 所 示 。 
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图 10.31 Chrome 浏览 器 显示 效果 图 10.32 ”IE6 浏览 器 显示 效果 


2. IE6 浏览 器 中 元 素 最 小 高 度 的 问题 


IE6 浏览 器 有 默认 的 最 小 像素 高 度 19px, 因此 它 无 法 识别 19px 以 下 的 高 度 值 。 接 下 
来 通过 案例 来 演示 ， 有 具体 如 例 10-15 所 示 。 
【 例 10-15】 IE6 浏览 器 中 元 素 最 小 高 度 的 问题 。 


Doowamnmuwmc wm 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 浏 览 器 兼容 性 </title> 
<style> 

div{ width:300px; height:10px; background-color:red; } 
</style> 
</head> 
<body> 
<div class="content"> 

<div class="one"></div> 
</div> 
</body> 
</html> 


在 Chrome 和 了 IE6 浏览 器 中 运行 结果 分 别 如 图 10.33 和 图 10.34 所 示 。 








[a 
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10.33 ”Chrome 浏览 器 显示 效果 图 10.34 IE6 浏览 器 显示 效果 


由 图 10.33 和 图 10.34 可 以 看 出 ，Chrome 浏览 器 中 元 素 显示 为 10px 高 度 的 红色 背 
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景 ， 在 正 6 浏览 器 中 的 元 素 高 度 明 显 大 于 10px。 解 决 这 个 问题 有 两 种 方法 ， 具 体 如 下 。 

。 为 元 素 定义 “overflow:hidden” 样 式 ， 通 过 这 个 样式 ， 将 超出 的 部 分 隐藏 ; 

。 为 元 素 定义 “font-size:0” 样 式 。 

两 种 方法 都 可 以 解决 IE6 浏览 器 不 能 识别 低 于 19px 高 度 的 问题 , 但 第 二 种 方法 会 妨 
碍 字体 大 小 的 设置 ， 因 此 建议 使 用 第 一 种 方法 。 

修改 例 10-15 中 元 素 的 样式 ， 具 体 代 码 如 下 。 

<style type="text/css"> 

div{ width:300px; height:10px; background-color:red; 
overflow:hidden; } 
</style> 














保存 文档 ， 刷 新 网 页 ， 在 Chrome 和 IE6 浏览 器 中 的 效果 分 别 如 图 10.35 和 图 10.36 
所 示 。 
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图 10.35 ” Chrome 浏览 器 显示 效果 图 10.36 IE6 浏览 器 显示 效果 


3. IE6 浏览 器 中 浮动 元 素 的 双 倍 外 边 距 问 题 


当 制 作 网 页 时 ， 经 常 出 现 下 6 浏览 器 浮动 的 双 倍 外 边 距 问题 ， 即 设置 浮动 元 素 的 左 
外 边 距 或 右 外 边 距 时 ， 在 下 6 浏览 器 中 运行 ， 元 素 对 应 的 左 外 边 距 或 右 外 边 距 是 所 设置 
值 的 两 倍 。 接 下 来 通过 案例 来 演示 IE6 浏览 器 中 浮动 元 素 的 双 倍 外 边 距 问题 ,具体 如 例 
10-16 所 示 。 

【 例 10-16】 IE6 浏览 器 中 浮动 元 素 的 双 倍 边 距 问题 。 


符 <!doctype html> 

2 <html> 

2 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 浏 览 器 兼容 性 </title> 

6 <style> 

2 #boxl{ width:200px; height:100px; border:lpx black solid; 
8 background:red; } 

号 #box2{ width:50px; height:50px; border:1lpx black solid; 
10 


background:blue; float:left; padding:0px 1l0px Opx 10px; 
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了 3 margin-left:20px; } 

12 </style> 

13 </head> 

14 <body> 

15 <div id="boxl"> 

16 <div id="box2"> 子 元 素 </div> 
17 </div> 

18 </body> 

19 </html> 


在 Chrome 和 了 IE6 浏览 器 中 运行 结果 分 别 如 图 10.37 和 图 10.38 所 示 。 





© file:///D:/HTMLexample… 








10.37 ”Chrome 浏览 器 显示 效果 10.38 IE6 浏览 器 显示 效果 
由 图 10.37 和 图 10.38 可 以 看 出 ，IE6 浏览 器 中 元 素 的 左 外 边 距 是 在 Chrome 浏览 器 

中 左 外 边 距 的 两 倍 。IE6 浏览 器 中 的 双 倍 外 边 距 问题 可 以 通过 为 元 素 定义 “display: inline” 
CSS 演示 解决 。 例 10-16 中 在 box2 的 CSS 样式 中 添加 代码 如 下 。 

_display:inline; 

可 以 看 到 ， 在 上 述 代码 中 添加 了 只 针对 下 6 浏览 器 的 CSS 属性 Hack 前 级 “_”， 这 
因为 只 有 IE6 浏览 器 有 这 个 兼容 问题 。 

保存 文档 , 刷新 网 页 , 在 Chrome 和 IE6 浏览 器 中 的 效果 如 图 10.39 和 图 10.40 所 示 。 


加 





六 浏览 器 兼容 性 D: HTML example \chapter 10\10-15.html 











站 而 Fa 


和 10.39 ”Chrome 浏览 器 显示 效果 图 10.40 IE6 浏览 器 显示 效果 
图 10.40 可 以 看 出 ，IE6 浏览 器 中 元 素 左 外 边 距 正常 显示 。 
4. IE6 中 3px 间距 问题 


当 非 浮动 元 素 或 者 文本 在 一 个 浮动 元 素 之 后 ， 运 行 在 正 6 浏览 器 中 时 ， 非 浮动 元 素 
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或 文本 与 浮动 元 素 之 间 会 有 3px 的 间距 ， 这 就 是 典型 的 IE6 浏览 器 的 3px 间距 问题 。 接 
下 来 通过 案例 来 演示 ， 如 例 10-17 所 示 。 
【 例 10-17】 IE6 浏览 器 中 3px 间距 问题 。 


I <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title> 浏 览 器 兼容 性 </title> 

6 <style> 

div{ width:100px; height:100px; border:1px solid balck; 
8 float:left; background:red; } 
9 </styLle> 

10 </head> 

11 <body> 


12 ” <div> 浮动 元 素 </div> 

13 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉 承 " 用 良心 做 教育 "的 理念 ,， 

14 是 中 国 IT 职业 教育 领先 品牌 ， 全 力 打 造 互联 网 研发 人 才 服 务 优质 平台 。 拥 有 全 国 的 移动 
15 ”互联 网 教学 就 业 保 障 团队 ， 做 到 了 毕业 学 员 业 内 高 薪水 ， 成 为 学 员 信赖 的 IT 培训 机 构 。 
16 </body> 

17 </html> 


在 Chrome 和 下 6 浏览 器 中 运行 结果 分 别 如 图 10.41 和 图 10.42 所 示 。 


个 浏览 器 兼容 性 1 客人 性 x | 
C lo file:/ 


|EHTMLexamplewhapterl0\10-17.html 


千 锋 教育 隶属 于 北京 千 锋 互 
联 科技 有 限 公司 ， 一 直系 承 
"用 良心 做 教育 "的 理念 是 中 国 
于 人 


教育 隶属 于 北京 千 锋 互联 
技 有 限 公司 ,一直 策 承 "用 良 
心 做 教育 "的 理念 是 中 国 IT 职业 


造 互联 网 研发 人 才 
全 


平台 。 拥 有 的 和 区 
网 教学 就 业 保障 团队 ， 做 到 了 毕业 学 员 
| 内 高 新 水 ， 成 为 学 员 信 才 的 T 培 训 机 构 。 














有 全 国 的 移动 互联 网 教学 就 业 保障 团队 ， 做 
到 了 毕业 学 员 业 内 高 薪水 ， 成 为 学 员 信赖 的 IT 
培训 机 构 。 

















10.41 Chrome 浏览 器 显示 效果 图 10.42 ”IE6 浏览 器 显示 效果 





由 图 10.41 和 图 10.42 可 以 看 出 ， 在 Chrome 浏览 器 中 显示 正常 ， 在 IE6 浏览 器 中 ， 

文本 和 浮动 盒子 之 间 会 有 3px 间距 。 可 以 通过 为 浮动 元 素 设置 负 外 边 距 的 方法 解决 IE6 

浏览 器 中 的 这 个 问题 。 在 例 10-17 的 CSS 样式 中 添加 代码 ， 具 体 代码 如 下 。 
_margin-right:-3px; /* 这 里 要 使 用 只 有 IE6 识别 的 属性 Hack*/ 


保存 文档 ， 刷 新 网 页 ， 在 Chrome 和 正 6 浏览 器 中 的 效果 分 别 如 图 10.43 和 图 10.44 
所 示 。 
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|D: HTMLexample hapter 11\11-17.html 
F 锋 教育 永 属 于 北京 千 锋 互联 日 
一 直 秉承 "用 








C |@O iiae: //p:/HmtLexample… 会 | : | 











| 干 锋 教育 隶属 于 北京 干 锋 互联 科 

| 技 有 限 公司 ， 一 直 秉 承 "用 良心 做 

滞 育 "的 理念 :是 中 国 IT 职 业 教育 领 

尾 品 牌 ， 全 力 打造 互联 网 研发 人 

才 服务 优质 平台 。 拥有 全 国 
动 互联 网 教学 就 业 保障 团队 ， 做 到 了 毕业 学 员 
业内 高 薪水 ， 成 为 学 员 信赖 的 IT 培训 机 构 。 





RL a 全 力 打 造 
联网 研发 人 TF 


台 。 拥 有 全 国 的 移动 互联 网 教 
学 就 业 保障 团队 ， 做 到 了 毕业 学 员 业 内 高 新 
水 ， 成 为 学 员 信 赖 的 IT 培 训 机 构 。 












































图 10.43 Chrome 浏览 器 显示 效果 10.44 IE6 浏览 器 显示 效果 


5.IE6 中 图 片 底部 的 像素 间隙 问题 


一 张 图 片 插入 到 与 其 大 小 相同 的 元 素 中 ， 当 在 正 6 浏览 器 中 显示 时 ， 图 片 底部 会 有 
的 间 际 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 10-18 所 示 。 
【 例 10-18】 IE6 浏览 器 图 片 底部 的 像素 间 际 问题 。 


~ 


3p 


1 <!doctype html> 

区 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 浏 览 器 兼容 性 </title> 

6 <style> 

J div{ width:300px; height:100px; background-color:red; } 
8 </style> 

9 </head> 

10 <body> 

11 <div><img src="qianfeng.jpg"> 
12 </div> 

13 </body> 

14 </html> 


在 Chrome 和 了 E6 浏览 器 中 运行 结果 分 别 如 图 10.45 和 图 10.46 所 示 。 


和 一 一 一 TESTEES 本 
| 性 - EE 



























当 你 保 下 来 休息 的 时 候 ， 不 要 忘记 别人 还 在 奔跑 1 


一 一 干 锋 成 功 心 通 







当 你 停 下 来 休息 的 时 候 ， 不 要 忘记 别人 还 在 弄 哆 ! 
一 一 干 锋 成 功 心 语 


wo 





ee 











和 10.45 Chrome 浏览 器 显示 效果 辐 10.46 ”IE6 浏览 器 显示 效果 
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图 10.46 中 可 以 看 出 ， 当 图 片 在 正 6 浏览 器 中 显示 时 ， 元 素 的 底 边 会 出 现 间 际 。 解 
决 这 种 正 6 浏览 器 的 兼容 性 问题 有 以 下 两 种 解决 方法 。 

(1) <img> 标 签 与 <div> 标 签 放 在 同一 行 ， 如 例 10-18 中 ， 将 第 11 行 和 第 12 行 代 码 
合并 成 一 行 ， 具 体 示例 如 下 。 


<div><img src=“qianfeng.jpg“></div> 

(2) 为 <img> 定 义 “display: block” 样 式 ， 具 体 示例 如 下 。 

img{display:block; } 

为 了 便于 阅读 ， 在 实际 开发 中 常 建议 使 用 第 二 种 方法 ， 为 例 10-18 中 的 <img> 标 签 


定义 “display: block” 样 式 ， 保 存 文档 ， 刷 新 网 页 在 Chrome 和 IE6 浏览 器 中 的 运行 结 
果 分 别 如 图 10.47 和 10.48 所 示 。 





|D: HTMLexample \chapter 10\10-18,html 





当 你 停 下 来 体 息 的 时 候 ， 不 要 忘记 别人 还 在 奔跑 ! 


当 你 停 下 来 休息 的 时 候 ， 不 要 忘记 别人 还 在 弄 哆 ! Es 


We 一 - 


一 一 干 锋 成 功 心 二 
he 











10.47 Chrome 浏览 器 显示 效果 10.48 IE6 浏览 器 显示 效果 


10.4 本 章 小 结 


通过 本 章 的 学 习 ， 可 以 掌握 常见 的 布局 方案 ， 以 及 实现 一 个 整 页 开发 ， 通 过 整 页 开 
发 学 习 到 如 何 规划 结构 和 规划 样式 。 根据 整 页 的 制作 流程 , 举一反三 制作 其 他 页 面 效果 。 





10.5 己 是 
1. 填空 题 
(1) 自 适应 布局 是 利用 容器 宽 为 的 方式 来 实现 。 
(2) CSS Hack 主要 分 为 和 两 大 类 。 
(3) 正 条 件 注释 语句 主要 包含 。” ”条件 注释 语句 和 ”条件 注释 


语句 。 
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(4) 整 页 的 结构 大 概 可 划分 为 头 部 、 导 航 、 、 列 表 、 
尾部 等 模块 。 

(5) 在 网 页 开发 中 ， 常 用 命名 方式 有 和 两 种 。 
2. 选择 题 
(1) 自 适应 列 可 利用 ) 样式 来 实现 。 

A. background B. border C. position D. width 
(2) 隐藏 元 素 的 方法 是 六 

A. visibility:none B. visibility:hidden 

C. display:no D. overflow:hidden 
(3) 下 面 ( ”) 属性 取 值 不 可 以 为 负数 。 

A. padding B. margin C. text-indent D. z-index 
(4) 下 面 ( ) 符合 命名 规范 。 

A. 盒子 B. boxl C. span D. lbox 
(5) 下 面 ( ) 不 能 解决 正 6 浏览 器 显示 多 余 字 符 的 问题 。 

A. 添加 position:relative 样式 B. 删除 HTML 注释 

C. 添加 display:block 样式 D. 不 设置 浮动 元 素 的 宽度 


3， 思 考题 


(1) 请 简 述 如 何 制 作 一 个 两 列 布局 ， 要 求 堪 列 固定 ， 右 列 自 适 应 。 
(2) 请 简 述 整 页 制作 的 基本 流程 与 文件 规划 。 
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本 章 学 习 目 标 

。 了解 HTMLS5 新 版 本 的 语法 特点 ; 

。 掌握 HTMLS 新 增 标 签 与 新 增 属性 ; 

。 了 解 HTMLS5 其 他 功能 及 使 用 。 

在 前 面 的 章节 中 ， 介 绍 过 HTMLS 是 HTML 这 门 语 言 的 第 五 个 版 本 ， 也 是 目前 最 主 
流 的 版 本 。HTMLS5 提供 了 很 多 新 功能 和 新 特性 , 在 本 章 中 将 对 HTML5 进行 全 面 的 介绍 
和 讲解 。 


11.1 HTML5 简介 


11.1.1 HTML5 历史 


HTML5 草案 的 前 身 是 Web Applications 1.0, 于 2004 年 由 Web 超 文 本 应 用 技术 工作 
组 (Web Hypertext Application Technology Working Group) -WHATWG 提出 ，2007 年 被 
W3C 采纳 ， 并 成 立新 的 HTML 工作 团队 。 

HTMLS5 的 第 一 份 正式 草案 于 2008 年 1 月 22 日 公布 。 目前， HTMLS5 仍 处 于 完善 之 
中 。 然 而 ， 现 在 大 部 分 的 浏览 器 已 经 具备 支持 部 分 HTMLS5 的 能 力 。 

2012 年 12 月 17 日 ， 万 维 网 联盟 (W3C) 正式 宣布 HTML5 规范 定稿 。 根 据 W3C 
的 发 言 稿 称 :“HTML5 是 开放 的 Web 网 络 平台 的 葛 基 石 ”。 

2013 年 5 月 6 日 ，HTML 5.1 正式 草案 公布 。 该 规范 定义 了 第 五 次 重大 版 本 ， 第 一 
次 要 修订 万 维 网 的 核心 语言 超 文本 标记 语言 (HTML)。 这 个 版 本 通过 不 断 推出 新 功能 ， 
帮助 Web 应 用 程序 的 作者 努力 提高 新 元 素 的 操作 性 能 。 

2014 年 10 月 29 日 ， 万 维 网 联盟 宣布 经 过 近 八 年 的 艰辛 努力 ，HTML5 标准 规范 最 
终 制定 完成 ， 并 已 公开 发 布 。 








11.1.2 ”新 增 语法 














HTMLS5 在 之 前 的 HIML 语法 的 基础 上 进行 了 相应 的 改进 ， 下 面 将 详细 讲解 五 种 改 
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进 的 语法 方式 。 
1. DOCTYPE 文档 及 编码 
HTMLS 模式 下 的 DOCTYPE 文档 写法 非常 简单 ， 只 需要 通过 一 句 简单 的 代码 即 可 
实现 。 具 体 示例 如 下 。 
<!DOCTYPE html> 
比 起 HIML4.01 和 XHTML2.0 时 的 DOCTYPE 文档 写法 ，HIMLS 模式 下 的 


DOCTYPE 文档 写法 更 简便 。 除 了 文档 简便 ， 其 编码 写法 也 得 到 了 简化 ， 只 需要 指定 编 
码 方式 即 可 。 具 体 示例 如 下 。 
<meta charset="utf-8"> 
2. 忽略 元 素 大 小 写 
XHTML2.0 对 大 小 写 要 求 非常 严格 ， 规 定 所 有 标签 和 属性 都 必须 小 写 。 在 HTML5 
语法 中 ， 大 小 写 没有 那么 的 严格 ， 忽 略 元 素 大 小 写 。 具 体 示例 如 下 。 
<body> 
<input type="text"> 
<INPUT type="text"> 
<input TYPE="text"> 
</body> 
以 上 写法 在 HTMLS5 中 都 是 正确 的 , 但 这 里 要 注意 , 按照 W3C 组 织 规定 的 标准 ， 应 
尽量 采用 统一 小 写 的 方式 来 操作 HTML 标签 和 属性 。 


3. 属性 布尔 值 
HTML4.01 和 XHTML2.0 中 , 标签 属性 必须 完整 展示 , 即 属性 名 和 属性 值 同 时 存在 。 
如 设置 复 选 框 的 选中 状态 。 具 体 示例 如 下 。 


<body> 
<input type="checkbox" checked="checked"> 
</body> 


在 HTMLS5 语法 中 ， 可 以 只 写 属性 名 。 当 只 写 属 性 名 时 ， 默 认 属 性 值 为 tue。 如 果 
不 写 此 属性 ， 默 认 值 是 false。true 和 false 分 别 代表 真 和 假 ， 属 于 数据 类 型 中 的 布尔 值 类 
型 。 具 体 示例 如 下 。 


<body> 
<input type="checkbox" checked> 
</body> 


4. 属性 省 略 引号 
HIMLS 语法 中 对 操作 属性 值 中 的 引号 没有 太 多 的 要 求 ， 可 以 采用 双 引号 ， 也 可 以 
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采用 单 引 号 ， 甚 至 可 以 不 写 引 号 。 有 具体 示例 如 下 。 


<body> 
<input type="text"> 
<input type='text'> 
<input type=text> 
</body> 


以 上 属性 值 的 写法 都 是 正确 的 ， 但 是 要 注意 一 点 ， 当 属性 值 中 间 有 空格 隔 开 时 ， 需 
要 加 上 引号 。 具 体 示例 如 下 。 
<body> 
<input type="text" class="boxl box2"> <!-- 正确 --> 
<input type="text" class=box1 box2> <!-- 错误 --> 
</body> 
同样 根据 W3C 组 织 规定 的 规范 标准 ， 应 尽量 给 属性 名 添加 引号 且 最 好 为 双 引号 ， 
这 也 是 行业 中 一 直 遵 守 的 规范 写法 。 
5. 简化 标签 
HTML4.01 和 XHTML2.0 中 ,， 单 标签 必须 用 斜 杠 进行 闭合 操作 ， 如 input 标签 写法 。 
具体 示例 如 下 。 
<body> 
<input type="checkbox" /> 
</body> 
在 HTML5 语法 中 ， 对 于 单 标签 不 需要 闭合 操作 ， 直 接 输 写 单 标签 即 可 。 在 前 面 章 
节 中 也 是 这 样 操作 的 ， 这 是 W3C 推荐 的 标准 写法 。 有 具体 示例 如 下 。 
<body> 


<input type="checkbox"> 
</body> 


11.2 HTML5 新 增 标 签 


在 HIMLS 新 规范 中 ， 新 增 了 一 些 便于 使 用 的 标签 。 新 标签 可 分 为 结构 标签 、 媒 体 
标签 、 表 单 控件 标签 和 其 他 标签 四 类 。 下 面 详 细 讲解 这 些 新 标签 。 


11.2.1 ”结构 标签 


在 HTMLS5 结构 标签 出 现 之 前 ， 当 输 写 页 面 的 布局 结构 时 ， 都 是 采用 <div> 标 签 来 实 
现 。 现 在 可 以 采用 HTMLS5 提供 的 结构 标签 进行 布局 ， 而 且 这 些 结构 标签 通常 都 带 有 语 
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义 化 ， 因 此 更 有 利于 优先 搜索 引擎 。 这 是 W3C 推荐 的 方式 ， 未 来 将 通过 逐步 利用 结构 
标签 取代 <div> 标 签 的 方式 实现 页 面 布局 。 接 下 来 讲解 HIML5 中 新 增 的 结构 标签 。 


1. <header>、<footer> 标签 


<header> 和 <footer> 标 签 用 于 描述 网 页 结构 中 的 页 眉 部 分 和 页 脚 部 分 , 页 眉 通常 包含 
布局 中 的 头 部 信息 ， 页 脚 通常 包含 布局 中 的 尾部 信息 。 接 下 来 通过 案例 来 演示 这 两 个 标 
签 的 使 有 用， 具体 如 例 11-1 所 示 。 

【 例 11-1】 <header>、<footer> 标 签 的 使 用 。 


1 <!DOCTYPE HTML> 

2 <html> 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

5 ”<title>HTML5 新 增 标签 </title> 

6 <style> 

I #main{ width:480px; margin:0 auto; 

8 color:wihte; font-size:40px; } 

9 header{ height:100px; background:red; } 
0 footer{ height:100px; background:blue; } 
1 </style> 

12 </head> 

13 <body> 


14 <xdiv id="main"> 
5 <header> 页 眉 : 页 面 的 头 部 </header> 
6 <footer> 页 脚 : 页面 的 尾部 </footer> 
7 </div> 
8 </body> 
9 </html> 





运行 结果 如 图 11.1 所 示 。 
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图 11.1 <header>、<footer> 结 构 标 签 
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2. <hgroup>、<nav> 标 签 


<hgroup> 标 签 用 于 标题 组 合 ， 即 一 个 标题 和 一 个 子 标题 ， 或 者 标语 的 组 合 。<nav> 
标签 用 于 页 面 的 导航 结构 部 分 。 接 下 来 通过 案例 来 演示 这 两 个 标签 的 使 用 ,具体 如 例 11-2 
所 示 。 
【 例 11-2】 <hgroup>、<nav> 标 签 的 使 用 。 





运行 结果 如 图 11.2 所 示 。 
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图 11.2”<hgroup>、<nav> 结 构 标签 


3. <article>、<aside> 标 签 


<article> 标 签 用 于 描述 独立 的 内 容 部 分 ， 可 包含 其 他 语义 化 标签 。<aside> 标 签 定义 
用 于 <article> 标 签 以 外 的 内 容 ， 一 般 用 于 辅助 信息 或 侧 边栏 。 接 下 来 通过 案例 来 演示 这 
两 个 标签 的 使 用 ， 具 体 如 例 11-3 所 示 。 

【 例 11-3】 <article>、<aside> 标 签 的 使 用 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 

<style> 





.Clear:after{ content:""; display:block; clear:both; } 
#main{ width:480px; margin:0 auto; 


OOoDpp 


color:white; font-weight:bold; } 
header{ height:170px; background:red; padding:10px 0; } 
footer{ height:50px; background:blue; 
padding:10px 0; clear:both; } 
nav li{ float:left; margin-right:100px; } 
article{ width:300px; height:200px; color:black; 
border:1px #000 solid; float:left; padding:10px 0; } 
aside{ width:170px; height:200px; color:black; 
border:1px #000 solid; float:right; padding:10px 0; } 
</style> 
</head> 
<body> 


户 


> 
Domwamum 必 wm Po 





DDPp 
oOo 


<div id="main"> 
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22 <header> 

23 页 眉 : 页 面 的 头 部 

24 <hgroup> 

25 <h1> 主 标题 </h1> 

26 <h2> 副 标题 </h2> 

2 </hgroup> 

28 <nav> 

29 <ul> 

30 <1i> 导 航 1</1i> 
= <1i> 导 航 2</1i> 
32 <1i> 导 航 3</1i> 
33 </ul> 

34 </nav> 

35 </header> 

36 <article> 主 体 信息 </article> 
3 <aside> 辅 助 信息 </aside> 

38 <footer> 页 脚 : 页面 的 尾部 </footer> 
39 </div> 

40 </body> 

41 </html> 


运行 结果 如 图 11.3 所 示 。 





Dn 标签 > 乓 三 
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11.3 ”<article>、<aside> 结 构 标签 
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4. <section>、<figure> 标 签 


<section> 标 签 用 于 描述 页 面 上 的 板块 ， 划 分 页 面 上 的 不 同 区 域 。<figure> 标 签 用 于 
描述 图 像 或 视频 ， 其 包含 的 一 个 子 标签 <figcaption> 用 于 描述 图 像 或 视频 的 标题 部 分 。 接 
下 来 通过 案例 来 演示 这 两 个 标签 ， 具 体 如 例 11-4 所 示 。 

【 例 11-4】 <section>、<figure> 标 签 的 使 用 。 








1 <!DOCTYPE HTML> 

这 <html> 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5 ”<title>HTML5 新 增 标签 </title> 

6 <style> 

.Clear:after{ content:""; display:block; clear:both; } 
8 #main{ width:480px; margin:0 auto; 

9 color:white; font-weight:bold; } 


10 header{ height:170px; background:red; padding:10px 0; } 
11 footer{ height:50px; background:blue; 

12 padding:10px 0; clear:both; } 

3 nav li{ float:left; margin-right:100px; } 

14 article{ width:300px; height:150px; color:black; 

5 border:1px #000 solid; float:left; padding:10px 0; } 
16 aside{ width:170px; height:150px; color:black; 

Ely border:1lpx #000 solid; float:right; padding:1l0px 0; } 
18 section{ width:140px; height:70px; border:lpx #000 solid; 
19 float:left; margin:4px; } 

20 figure{ width:100%; height:100%; margin:0; } 

2 和 figure img{ width:100%; } 

22 </style> 

23 </head> 

24 <body> 

25 <div id="main"> 

26 <header> 

如 页 眉 : 页 面 的 头 部 

28 <hgroup> 

29 <h1> 主 标题 </h1> 

30 <h2> 副 标题 </h2> 

3 </hgroup> 

3 这 <nav> 

33 <ul> 

34 <1i> 导 航 1</1i> 

35 <1i> 导 航 2</1i> 


36 <1i> 导 航 3</1i> 


3 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
E33 
33 
54 
S58 
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</ul> 
</nav> 
</header> 
<article> 
<section> 
<figure> 
<img src="qianfeng.jpg"> 
<figcaption> 千 锋 互联 简介 信息 </figcaption> 
</figure> 
</section> 
<section> 板 块 2</section> 
<section> 板 块 3</section> 
<section> 板 块 4</section> 
</article> 
<aside> 辅 助 信息 </aside> 
<footer> 页 脚 : 页 面 的 尾部 </footer> 
</div> 
</body> 
</html> 


运行 结果 如 图 11.4 所 示 。 
































图 11.4 <section>、<figure> 结 构 标 签 
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11.2.2 ”媒体 标签 


媒体 标签 用 于 描述 网 页 中 的 音频 或 视频 元 素 ， 可 以 在 网 页 中 添加 音频 或 视频 文件 ， 


并 增加 一 些 与 音频 、 视 频 有 关 的 属性 和 方法 ， 下 面 分 别 来 学 习 音 频 标签 和 视频 标签 。 


等 。 


1. <audio> 音 频 标 签 


<audio> 音 频 标签 通过 src 属性 添加 音频 的 地 址 ， 支 持 常 见 音频 格式 ， 如 MP3、OGG 
默认 不 显示 音频 的 控件 ， 通 过 controls 属性 对 控件 进行 显示 。 接 下 来 通过 案例 来 演 


示 <audio> 音 频 标签 ， 具 体 如 例 11-5 所 示 。 


放 ; 
现 。 


【 例 11-5】 <audio> 音 频 标签 。 


1 <!DOCTYPE HTML> 

2 <html> 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5 ”<title>HTML5 新 增 标签 </title> 

6 </head> 

7 <body> 

8 <audio controls src="johann sebastian bach air.mp3"></audio> 

9 </body> 

10 </html> 


运行 结果 如 图 11.5 所 示 。 
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11.5 ”音频 控件 展示 效果 


在 默认 情况 下 ， 音 频 的 初始 状态 是 暂停 状态 ， 通 过 autoplay 属性 可 进行 自动 音频 播 
在 默认 情况 下 ， 音 频 播放 结束 就 会 停止 ， 如 果 想 循环 播放 可 通过 添加 loop 属性 来 实 
接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-6 所 示 。 

【 例 11-6】 音频 循环 播放 。 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


OND Pp 
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5 ”<title>HTML5 新 增 标签 </title> 

6 </head> 

7 <body> 

8 <audio controls autoplay loop src="johann sebastian bach air.mp3"></audio> 
9 </body> 

10 </html> 


运行 结果 如 图 11.6 所 示 。 
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11.6 ”音频 控件 自动 播放 


2. <video> 视 频 标 签 


<video> 视 频 标签 与 <audio> 音 频 标签 类 似 , 通过 src 属性 添加 视频 的 地 址 , 支持 常见 
视频 格式 ， 如 MP4、OGYV 等 。 同 样 需要 controls 属性 添加 和 显示 播放 控件 。 接 下 来 通过 
案例 来 演示 ， 具 体 如 例 11-7 所 示 。 

【 例 11-7】 <video> 视 频 标签 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<video controls src="Intermission-Walk-in 512kb.mp4"></video> 
</body> 

</html> 


运行 结果 如 图 11.7 所 示 。 

<video> 视 频 标签 同样 也 支持 autoplay 属性 和 loop 属性 ， 而 且 可 添加 width、height 
属性 来 控制 控件 的 尺寸 。 

除了 上 边 介 绍 的 <audio> 和 <video> 操 作 外 ， 还 会 涉及 很 多 与 音频 、 视 频 有 关 的 
JavaScript 接口 。 通 过 JavaScript 接口 的 操作 可 实现 自 定义 控件 ， 可 以 实现 更 加 美观 和 统 
一 的 播放 器 效果 。 由 于 本 教程 不 涉及 JavaScript 部 分 ， 这 里 不 进行 展开 讨论 。 
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GC |@ sile:///D:/HIMLexample/chapterl1/11-7.html 售 








图 11.7 视频 控件 展示 效果 


11.2.3 ”表单 控件 标签 


在 介绍 新 表单 控件 前 ， 先 来 回顾 一 下 ， 在 前 面 章 节 中 介绍 的 表单 控件 <input>， 通 过 
设置 type 属性 可 以 展示 不 同 的 表单 控件 ， 如 输入 框 、 密 码 框 、 单 选 按钮 、 复 选 枉 、“ 上 
传 ” 按 钮 “提交 ”按钮 等 。 在 HTML5 规范 中 对 <input> 标 签 的 type 属性 值 进行 扩展 ， 
添加 新 的 表单 控件 元 素 ， 下 面 进 行 详 细 讲解 。 

1. email、url、tel 值 

当 <input> 标 签 的 type 属性 值 为 email 时 ， 表 示 用 于 邮箱 地 址 的 文本 字段 。 当 提交 的 
内 容 不 是 正确 的 email 值 时 ， 默 认 会 有 提示 信息 产生 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 
例 11-8 所 示 。 

【 例 11-8】 emali、url、tel 值 。 





下 <!DOCTYPE HTML> 

2 <html> 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5 ”<title>HTML5 新 增 标签 </title> 

6 </head> 

流 <body> 

8 <form action="http://www.qfedu.com"> 
9 <input type="email" name="email"> 
10 <input type="submit" value=" 提 交 "> 
11 </form> 

12 </body> 

13 </html> 
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运行 结果 如 图 11.8 所 示 。 
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11.8 type 属性 值 为 email 


当 <input> 标 签 的 type 属性 值 为 url 时 ， 表 示 用 于 链接 地 址 的 文本 字段 。 当 提交 的 内 
容 不 是 正确 的 url 值 时 ,默认 会 有 提示 信息 产生 。 接 下 来 通过 案例 来 演示 ,具体 如 例 11-9 
所 示 。 

【 例 11-9】 提交 内 容 不 正确 时 ， 默 认 有 提示 信息 产生 。 


本 <!DOCTYPE HTML> 

区 <html> 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5 ”<title>HTML5 新 增 标签 </title> 

6 </head> 

7 <body> 

8 <form action="http://www.qfedu.com"> 
9 <input type="url" name="url"> 

10 <input type="submit" value=" 提 交 "> 
11 </form> 

12 </body> 

13 </html> 


运行 结果 如 图 11.9 所 示 。 











本 一 一 一 匣 
| 本 请 答 入 网 站 。 





图 11.9 type 属性 值 为 url 展示 效果 
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当 <inpu 忆 标签 的 type 属性 值 为 tel 时 ， 表 示 用 于 电话 号 码 的 文本 字段 。 当 输入 错误 
值 时 不 会 产生 提示 信息 ， 在 移动 端 中 会 展现 对 应 的 数字 键盘 ， 如 图 11.10 所 示 。 


2. 


1 2 3 


ABC DEF 
4 5 
GHI JKL 

8 

TUV 





11.10 手机 上 展现 的 数字 键盘 


range、color 值 


当 <input> 标 签 的 type 属性 值 为 range 时 ， 展 示 为 滑 块 拖 动 的 效果 。 当 <input> 标 签 的 
type 属性 值 为 color 时 ， 展 示 为 获取 颜色 值 的 效果 ， 当 单 击 颜色 按钮 时 ， 会 弹出 获取 颜 
色 的 面板 层 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-10 所 示 。 

【 例 11-10】 range、color 值 。 


OOoODNDPp 


人 济 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<form action="http://www.qfedu.com"> 
<input type="range" min="1" max="10"> 
<input type="color"> 

</form> 

</body> 

</html> 


行 结果 如 图 11.11 所 示 。 


search、number 值 


当 <input> 标 签 的 type 属性 值 为 search 时 , 表示 用 于 搜索 的 文本 字段 。 与 文本 输入 框 
效果 相似 ， 当 输入 搜索 内 容 时 ， 会 显示 带 有 关闭 按钮 的 效果 。 接 下 来 通过 案例 来 演示 ， 
具体 如 例 11-11 所 示 。 


口 EML5 新 增 标签 


第 章 HTM15 标签 与 属性 


x 





3 


基本 
而 
画 
转 
mm 
LL 


四面 司 司 1 1 


四 


， 


Le | ws | 





GG |Q© file:/ 


于 证 自主 六 于 多 > | 颜色 | 纯色 0) 襄 度 ): 司 ” 蔓 : 忆 一 


D:/HIMLexample/chapter11/11-10.html 食 


Ed| 


置 | 


色调 加 :|eo 阿 Gp | 
怨 和 广 G) 口 ” 强 (6) | 


添加 到 自 定义 颜色 (A) | 











11.11 type 属性 值 为 range 和 color 展示 效果 


【 例 11-11】 search 值 。 


10 </form> 
11 </body> 
12 </html> 


运行 结果 如 图 11.12 所 示 。 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


<form action="http://www.qfedu.com"> 


1 <!DOCTYPE HTML> 

2 <html> 

3 <head> 

4 

5 ”<title>HTML5 新 增 标签 </title> 
6 </head> 

. <body> 

8 

9 


<input type="search"> 























图 11.12 type 属性 值 为 search 展示 效果 
当 <input> 标 签 的 type 属性 值 为 number 时 ， 表 示 用 于 微调 数字 的 文本 字段 。 在 输入 
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框 中 会 显示 带 有 上 下 单 击 按钮 的 效果 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-12 所 示 。 
【 例 11-12】 输入 框 显示 带 有 上 下 单 击 按钮 效果 。 


oamwmmwnN 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<form action="http://www.qfedu.com"> 
<input type="number"> 

</form> 

</body> 

</html> 


运行 结果 如 图 11.13 所 示 。 
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11.13 ”type 属性 值 为 number 展示 效果 


4. date、week、month、time 值 


当 <input> 标 签 的 type 属性 值 为 date、week、month、time 时 ， 表 示 用 于 日 期 和 时 间 
的 文本 字段 。 这 几 个 值 都 提供 带 有 单 击 选择 框 的 效果 。 接 下 来 通过 案例 来 演示 ， 具 体 如 
例 11-13 所 示 。 

【 例 11-13】 date、week、mont、time 值 。 


虽 ooDDnamuwm 必 wm 


10 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 
</head> 
<body> 
<form action="http://www.qfedu.com"> 
<input type="date"> 


<input type="week"> 


运行 


第 章 HTM1L5 标签 与 属性 337 


<input type="month"> 
<input type="time"> 
</form> 
</body> 
</html> 


结果 如 图 11.14 所 示 。 
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11.14 type 属性 值 为 date、week、month、time 展示 效果 


下 面 介 绍 一 些 HIML5 表单 控件 里 新 添加 的 属性 操作 。 

(1) placeholder 属性 

placeholder 属性 用 来 规定 帮助 用 户 填写 输入 字段 的 提示 信息 ， 接 下 来 通过 案例 来 演 
具体 如 例 11-14 所 示 。 

【 例 11-14】 placeholder 属性 。 


1 
之 
3 
4 
5 
6 
7 
8 
9 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<form action="http://www.qfedu.com"> 
<input type="text" placeholder=" 请 输入 账号 "> 
<input type="password" placeholder=" 请 输入 密码 "> 

</form> 

</body> 

</html> 


运行 结果 如 图 11.15 所 示 。 
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11.15 ”placeholder 属性 展示 效果 


(2) autocomplete 属性 

autocomplete 属性 用 于 规定 是 否 启用 自动 完成 功能 的 表单 ， 默 认 值 为 an， 规定 启用 
自动 完成 功能 ，o 企 值 规定 禁用 自动 完成 功能 。 局 动 自动 完成 功能 即 当 再 次 输入 提交 过 的 
内 容 时 会 显示 自动 完成 提示 层 。 禁 止 自动 完成 即 不 会 显示 自动 完成 提示 层 。 接 下 来 通过 
案例 来 演示 ， 具 体 如 例 11-15 所 示 。 

【 例 11-15】 autocomplete 属性 。 


1 <!DOCTYPE HTML> 

Fe <html> 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5 ”<title>HTML5 新 增 标签 </title> 

6 </head> 

7 <body> 

8 <form action="http://www.qfedu.com"> 

9 <input type="text" name="text"> 

10 <input type="submit" value=" 提 交 "> 

11 <input type="text" autocomplete="off" name="text"> 
4 <input type="submit" value=" 提 交 "> 

13 </form> 

14 </body> 

15 </html> 


运行 结果 如 图 11.16 所 示 。 
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11.16 autocomplete 属性 展示 效果 


(3) autofocus 属性 
autofocus 属性 规定 加 载 完 页 面 输入 框 时 会 自动 获取 光标 。 接 下 来 通过 案例 来 演示 ， 
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具体 如 例 11-16 所 示 。 
【 例 11-16】 autofocus 属性 。 


DaDwcwmN 


运行 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<form action="http://www.qfedu.com"> 
<input type="text" name="text" autofocus> 
<input type="submit" value=" 提 交 "> 

</form> 

</body> 

</html> 


结果 如 图 11.17 所 示 。 

















11.17 使 用 autofocus 属性 自动 获取 光标 


(4) required 属性 

required 属性 规定 在 提交 时 和 输入 框 的 内 容 不 能 为 空 ， 如 果 内 容 为 空 ， 单 击 提交 按钮 
时 会 显示 提示 信息 层 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-17 所 示 。 

【 例 11-17】 required 属性 。 


oem 必 wN 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<form action="http://www.qfedu.com"> 
<input type="text" name="text" required> 
<input type="submit" value=" 提 交 "> 

</form> 

</body> 

</html> 
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11.18 使 用 required 属性 判断 是 否 为 空 值 


(5) pattem 属性 

pattem 属性 规定 输入 字段 值 的 模式 或 格式 ， 如 pattem="[0-9]" 表示 输入 值 必须 是 
0 一 9 的 数字 。 当 输入 的 字段 与 规定 不 一 致 时 ,会 显示 提示 信息 层 。 接 下 来 通过 案例 来 演 
示 ， 具 体 如 例 11-18 所 示 。 

【 例 11-18】 pattem 属性 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<form action="http://www.qfedu.com"> 


oor 


<input type="text" name="text" pattern="[0-9]"> 
<input type="submit" value=" 提 交 "> 

</form> 

</body> 

13 </html> 


运行 结果 如 图 11.19 所 示 。 
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图 11.19 使 用 pattern 属性 判断 模式 是 否 匹 配 
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11.2.4 ”其 他 标签 


1. <mark> 标 签 


<mark> 标 签 用 于 描述 突出 显示 部 分 的 文本 。 默 认 情 况 下 会 添加 黄色 的 背景 色 。 接 下 
来 通过 案例 来 演示 ， 具 体 如 例 11-19 所 示 。 
【 例 11-19】 <mark> 标 签 的 使 用 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 
</head> 
<body> 
<p> 千 锋 教育 隶属 于 千 锋 互联 科技 有 限 公 司 ， 一 直 秉 承 "<mark> 用 良心 做 教育 </mark>" 
的 理念 ， 致 力 于 打造 IT 教育 全 产业 链 人 才 服 务 平台 。</p> 
</body> 
</html> 


运行 结果 如 图 11.20 所 示 。 
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千 锋 教育 隶属 于 二 锋 互 联 科技 有 限 公司 ,一 直 和 桑 承 “ 用 良心 做 教 
育 " 的 理念 ,致力 于 打造 [教育 全 产业 链 人 才 服 务 平台 。 





图 11.20 <mark> 标 签 展示 效果 


2. <progress> 标 签 


<progress> 标 签 用 于 定义 运行 中 的 进度 或 进程 。 一 般 需 要 配合 JavaScript 来 展示 进度 
条 的 动态 效果 。 有 两 个 可 选 的 属性 ，max 属性 表示 完成 的 值 ，value 属性 表示 当前 的 值 。 
接 下 来 通过 案例 来 演示 ， 有 具体 如 例 11-20 所 示 。 

【 例 11-20】 <progress> 标 签 的 使 用 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


ODPp 
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5 ”<title>HTML5 新 增 标签 </title> 

6 </head> 

7 <body> 

8 <progress max="100" value="25"></progress> 
9 </body> 

10 </html> 


运行 结果 如 图 11.21 所 示 。 
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11.21 ”<progress> 标 签 展示 效果 
3. <time> 标 签 


<time> 标 签 用 于 描述 日 期 或 时 间 ， 其 datetime 属性 定义 元 素 的 日 期 和 时 间 。 如 果 未 
定义 该 属性 ， 则 必须 在 元 素 的 内 容 中 规定 日 期 或 时 间 。 显 示 效 果 与 普通 的 <span> 标 签 相 
同 ，<time> 属 于 语义 化 标签 ， 没 有 默认 样式 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-21 
所 示 。 

【 例 11-21】 <time> 标 签 的 使 用 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 
</head> 
<body> 
<p> 我 在 <time datetime="2017-02-14"> 情 人 节 </time> 有 个 约会 </p> 
</body> 
10 </html> 


运行 结果 如 图 11.22 所 示 。 
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图 11.22 ”<time> 标 签 展示 效果 
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4. <ruby> 标 签 


<rby> 标 签 用 于 定义 注解 ， 一 般 用 在 中 文 注 音 中 。 其 中 有 一 个 配套 的 <re> 子 标签 ， 
用 来 添加 注解 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 11-22 所 示 。 
【 例 11-22】 <ruby> 标 签 的 使 用 。 


Dowamnmumc wm 


运 和 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 
</head> 
<body> 
<ruby> 
杜 <rt>qdii</rt> 
</ruby> 
</body> 
</html> 


J 结果 如 图 11.23 所 示 。 
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图 11.23 ”<ruby> 标 签 展示 效果 


5.<canvas> 标 签 


<canvas> 标 签 用 于 定义 图 形 ， 例 如 图 表 和 其 他 图 像 。 通 常 利用 <canvas> 标 签 绘制 一 
些 HTML 所 不 能 绘制 的 图 形 ， 但 <canvas> 标 签 需要 配合 JavaScript 才能 使 用 ， 这 里 简单 
了 解 即 可 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-23 所 示 。 

【 例 11-23】 <canvas> 标 签 的 使 用 。 


1 
2 
3 
4 
5 
6 
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<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 

</head> 

<body> 
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8 <canvas id="canvas" width="100" height="100"></canvas> 


9 <script> 


10 Var canvas=document .getElementBylId ("canvas"); 

1 Var context=canvas .getContext ("2d"); 

12 context .beginPath (); 

3 for (var i=0; i<5;i++){ 

zy context.lineTo (Math.cos((18+i*72) /180*Math .PI)*50+50, 
Ls -Math.sin((18+i*72) /180*Math.PI)*50+50); 

16 context.lineTo (Math.cos((54+i*72) /180*Math .PI)*20+50, 
17 -Math.sin((54+i*72) /180*Math.PI)*20+50); 

18 } 

9 context .closePath(); 

20 context .lineWidth="3"; 

六 context .fillStyle="#F6F152"; 

22 context .strokeStyle="#F5270B"; 

23 context .fill(); 

24 context.stroke(); 

25 </script> 

26 </body> 

27 </html> 


运行 结果 如 图 11.24 所 示 。 
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11.24 ”<canvas> 标 签 展示 效果 


6. <details> 标 签 














<details> 标 签 用 于 描述 文档 或 文档 某 个 部 分 的 细节 。 与 <summary> 标 签 配合 使 用 可 
以 为 details 定义 标题 。 标 题 是 可 见 的 ， 当 用 户 单 击 标题 时 ， 会 显示 出 details 的 内 容 。 接 
下 来 通过 案例 来 演示 ， 具 体 如 例 11-24 所 示 。 

【 例 11-24】 <details> 标 签 的 使 用 。 


1 <!DOCTYPE HTML> 
中 <html> 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 
</head> 
<body> 
<details> 
<summary> 干 锋 教育 </summary> 
<p> 千 锋 教 育 隶 属于 北京 千 锋 互联 科技 有 限 公 司 ， 一 直 秉承 “用 良心 做 教育 ”的 理念 ， 
致力 于 打造 IT 教育 全 产业 链 人 才 服务 平台 。</p> 
</details> 
</body> 
</html> 


了 结果 如 图 11.25 所 示 。 


古 ms 新 增 标 和 
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Y 于 锋 教 育 


千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 ,一 走 对 承 “ 用 良心 做 
教育 ”的 理念 ， 致 力 于 打造 [教育 全 产业 链 人 才 服 务 平台 。 





11.25 ”<details> 标 签 展示 效果 


7. <datalist> 标 签 


<datalist> 标 签 用 于 定义 选项 列表 ， 与 input 元 素 配 合 使 用 ， 定 义 input 可 能 的 值 。 
datalist 及 其 选项 不 会 被 显示 出 来 ， 仅 仅 是 合法 的 输入 值 列 表 ， 需 使 用 input 元 素 的 list 
属性 来 绑 定 datalist。 这 种 方式 的 好 处 是 增强 了 用 户 体验 ， 同 时 可 提示 用 户 完成 输入 。 接 
下 来 通过 案例 来 演示 ， 有 具体 如 例 11-25 所 示 。 

【 例 11-25】 <detalist> 标 签 的 使 用 。 


虽 ownamwm 必 wmn 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 

</head> 

<body> 

<input list="content"> 


<datalist id="content"> 
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<option value="HTML"></option> 
<option value="CSS"></option> 
<option value="JS"></option> 

</datalist> 

</body> 

</html> 


结果 如 图 11.26 所 示 。 














11.26 ”<datalist> 标 签 展 示 效果 


8. <output> 标 签 


<output> 标 签 用 于 定义 执行 计算 后 的 显示 结果 ， 配 合 简单 的 JavaScript 进行 操控 。 
在 <form> 表 单 上 定义 一 段 JavaScript 操作 用 来 计算 结构 。 在 <output> 标 签 上 定义 一 个 for 
属性 用 于 指定 一 个 或 多 个 相关 的 元 素 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 11-26 所 示 。 
【 例 11-26】 <output> 标 签 的 使 用 。 


吕 oowamuwm 必 wmN 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 标签 </title> 
</head> 
<body> 
<form action="" id="myform" 
oninput="num.value=parseInt (numl.value)+parseInt (num2.value)"> 
<input type="number" id="numl">+ 
<input type="number" id="num2">= 
<output name="num" for="numl num2"></output> 
</form> 
</body> 
</html> 


行 结果 如 图 11.27 所 示 。 
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11.27 ”<output> 标 签 展示 效果 


11.3 HTML5 新 十 属 性 


HTML5 除了 新 增 标签 还 提供 了 新 的 标签 属性 ， 这 些 属性 可 以 用 在 任意 标签 上 。 下 
面 将 详细 介绍 HMTL5 新 增 属性 。 


11.3.1 data-* 属 性 


固定 与 自 适 应 混合 布局 是 很 常见 的 组 合 方式 ， 如 千 锋 官网 的 头 部 效果 。data-* 属 性 
用 于 自 定义 属性 ， 所 谓 data-* 实 际 上 是 data- 前 级 加 上 自 定义 的 属性 名 ， 使 用 这 样 的 结构 
可 以 进行 数据 存放 。 使 用 data-* 可 以 解决 自 定义 属性 混乱 无 管理 的 现状 。 

data-* 设 置 在 HTML 标签 上 ， 页 面 中 不 显示 任何 数据 ， 只 能 通过 JavaScript 的 方式 
来 获取 数据 。 其 设置 示例 如 下 。 


<div data-name=" 千 锋 教育 ”data-info=" 一 直 秉承 “用 良心 做 教育 ”的 理念 ， 
致力 于 打造 IT 教育 全 产业 链 人 才 服 务 平台 。"></div> 


11.3.2 hidden 属性 
hidden 属性 用 于 隐藏 HTML 标签 与 CSS 的 display 属性 值 为 none 的 效果 相似 , 但 它 
是 通过 属性 隐藏 ， 而 不 是 样式 隐藏 。 其 设置 示例 如 下 。 
<p hidden> 千 锋 教 育 隶 属于 北京 千 锋 互 联 科技 有 限 公 司 ， 一 直 秉 承 “ 用 良心 做 教育 ”的 理念 ， 
致力 于 打造 IT 教育 全 产业 链 人 才 服 务 平台 。</p> 
11.3.3 spellcheck 属性 


spellcheck 属性 规定 是 否 对 元 素 内 容 进行 拼写 检查 。 当 输入 的 单词 错误 时 ， 会 出 现 
下 夯 线 提示 信息 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-27 所 示 。 
【 例 11-27】 spellcheck 属性 。 


1 <!DOCTYPE HTML> 
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局 
So 
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<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 属性 </title> 

</head> 

<body> 

<textarea spellcheck style="width:300px; height:100px;"></textarea> 
</body> 

</html> 


了 结果 如 图 11.28 所 示 。 
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11.28 ”spellcheck 属性 展示 效果 


11.3.4 ”contenteditable 属性 


contenteditable 属性 规定 是 否 可 编辑 元 素 的 内 容 。 设 置 contenteditable 属性 的 HTML 
标签 元 素 ， 当 单 击 时 可 以 进行 文本 编辑 操作 ， 与 输入 框 的 效果 类 似 。 接 下 来 通过 案例 来 
演示 ， 有 具体 如 例 11-28 所 示 。 

【 例 11-28】 contenteditable 属性 的 使 用 。 


虽 oomwnamnum 必 wmwN 


PR 
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<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>HTML5 新 增 属 性 </title> 

</head> 

<body> 

<p contenteditable> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 , 一 直 秉承 "用 良心 做 教育 " 
的 理念 ,致力 于 打造 IT 教育 全 产业 链 人 才 服 务 平台 。</p> 

</body> 

</html> 
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运行 结果 如 图 11.29 所 示 。 
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教育 隶属 于 北京 千 锋 互 联 科 技 有 限 公司 ， 一 直 桑 承 “ 用 良心 做 
教育 ”的 理念 ， 致 力 于 打造 [教育 全 产业 链 人 才 服务 平台 。 





11.29 ”contenteditable 属性 展示 效果 


11.4 HTML5 其 他 功能 


HTML5 新 规范 中 提供 了 很 多 功能 强大 的 特性 ， 为 开发 者 带 来 了 极 大 的 方便 。 大 部 
分 功能 都 需要 配合 JavaScript 才能 完成 ， 这 里 只 简单 地 介绍 一 些 便于 使 用 的 功能 。 至 于 
如 何 更 好 地 使 用 这 些 功能 ， 需 了 解 JavaScript 语法 后 才 可 以 彻底 地 掌握 ， 这 里 不 再 进行 
深入 讨论 。 


11.4.1 拖 放 文件 


拖 放 是 指 对 计算 机 中 的 文件 或 文件 夹 进行 拖 动 处 理 ， 从 而 把 文件 移动 到 指定 的 位 
置 。 这 些 操作 在 HTMLS5 诞生 之 前 只 能 在 计算 机 上 进行 操作 ， 而 在 HTMLS5 新 规范 中 可 
以 把 文件 拖 动 到 浏览 器 中 进行 操作 。 这 样 可 以 更 加 方便 地 进行 电脑 与 浏览 器 之 间 的 交互 
处 理 ， 如 QQ 邮箱 的 拖 动 文件 上 传 的 功能 。 实 现 HIMLS 拖 动 操作 ， 利 用 的 是 JavaScript 
接口 中 的 drag 与 drop 这 两 个 方法 ， 接 下 来 通过 案例 来 演示 拖 放 文件 ， 具 体 如 例 11-29 
所 示 。 

【 例 11-29】 拖 放 文件 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 新 增 属性 </title> 
<style> 
body{ font-size:40px; } 
#dragBox{ width:400px; height:100px; border:1px #000 solid; } 


Oo mrp 


#dragProgress{ display:none; } 
10 #dragSuccess{ display:none; } 
二 站 #progressBar{ width:300px; height:50px; background:gray; } 
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2 #progressUpBar{ width:0%; height:100%; background:blue; } 
13 </style> 
14 </head> 


15 <body><br> 
16 <div id="dragBox"> 请 拖 动 到 此 区 域 !!! </div> 


17 <div id="dragProgress"> 


18 <div id="progressBar"> 

19 <div id="progressUpBar"></div> 

20 </div> 

21 <div id="progressValue">0/s</div> 

22 <div id="progressTime">00:00:00</div> 

23 </div> 

24 <div id="dragSuccess"></div> 

25 </body> 

26 <script> 

| Var oDragBox = document .getElementById('dragBox'); 

28 Var oDragProgress = document .getElementById('dragProgress'); 
29 Var oDragSuccess = document .getElementById('dragSuccess'); 
30 Var oProgressBar = document .getElementById('progressBar'); 
31 Var oProgressUpBar = document .getElementById('progressUpBar'); 
三 可 Var oProgressValue = document .getElementById("ProgressValue '): 
33 Var oProgressTime = document .getElementById('progressTime'); 
34 oDragBox.ondragenter = function(){ 

39 this.innerHTML = ' 可 以 释放 啦 !!1!1! '; 

36 i 

汪 沉 oDragBox.ondragover = function (ev)1{ 

38 ev.preventDefault (); 

39 ys 

40 oDragBox.ondragleave = function(){ 

41 this.innerHTML = ' 请 拖 动 到 此 区 域 !!! '; 

42 i 

43 oDragBox.ondrop = function(ev){ 

44 oDragProgress.style.display = 'block'; 

45 oDragSuccess.style.display = 'none'; 

46 var fs = ev.dataTransfer.files[0]; 

47 var fd = new FormData(); 

48 Var startTime = now(); 

49 var startValue = 0; 

50 fd.append('fileName',fs); 

SR Var xhr = new XMLHttpRequest (); 

52 xhr .open ('POST', 'file2.php',true); 


953 Xhr .responseType = "json'7 
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96 return, "0" Fn» 

97 } 

98 elsei{ 

99 return +n; 

100 » 

101 } 

102 function now(){ 

103 return (new Date () ) .getTime(); 
104 } 


105 </script> 
106 </html> 


运行 结果 如 图 11.30 所 示 。 
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0/s 
00:00:00 


11.30” 拖 动 文件 展示 效果 





11.4.2 ”本 地 存储 


本 地 存储 是 指 对 浏览 器 中 操作 的 数据 进行 缓存 处 理 。 从 本 地 中 获取 数据 ， 可 以 优化 
网 络 请 求 ， 提 高 网 站 的 访问 效率 。 

本 地 存储 在 移动 端 页 面 中 应 用 范围 较为 广泛 ， 可 在 网 络 不 稳定 的 情况 下 ， 展 示 缓 存 
数据 。 实 现 HTML5 本 地 存储 的 操作 ， 利 用 的 是 JavaScript 接口 中 的 sessionStorage 与 
localStorage 这 两 个 方法 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-30 所 示 。 

【 例 11-30】 本 地 存储 。 


于 <!DOCTYPE HTML> 
的 <html> 
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3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5 ”<title>HTML5 其 他 功能 </title> 

6 <style> 

7 textarea{ width:300px; height:100px; } 

8 





</style> 
</head> 
10 <body> 
11 标题 : <input type="text"> <br> 
2 性 别 : <input type="radio"” value=" 男 "> 男 
3 <input type="radio" value=" 女 "> 女 
14 <br> 
5 内 容 : <textarea id="t1"></textarea> 
16 </body> 
7 <script> 
18 var aInput = document .getElementsByTagName('input'); 
19 var oT = document .getElementById('t1°'); 
20 if (window.localStorage.getItem('title')){ 
站 二 aInput [0] .value = window.localStorage.getItem('title'); 
22 } 
2 for (var i=1;i<aInput.length;i++){ 
有 4 if( aInput[i]l.value == window.localStorage.getItem('sex') ){ 
Pd aInput [1i] .checked = true; 
26 
27 
28 if (window.localStorage.getItem('text')){ 
29 oT.value = window.localStorage.getItem('text'); 
30 
3 window.onunload = function(){ 
32 if( aInput[0] .value ){ 
33 window.localStorage.setItem('title',aInput[0] .value); 
34 
如 for (var i=1;i<aInput.length;i++){ 
36 if( aInput[i].checked ){ 
3 window.localStorage.setItem('sex',aInput[i] .value); 
38 } 
S99 } 
40 if( oT.value ){ 
41 window.localStorage.setItem('text',oT.value); 
42 } 
43 }; 


44 </script> 
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运行 结果 如 图 11.31 所 示 。 
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本 地 存 情 ， 是 指 对 浏览 器 中 操作 的 数据 进行 绥 存 处 
理 。 数 据 可 以 从 本 地 中 获取 ， 这 样 可 提高 网 络 请 求 
对 的 优化 ， 提 高 网 站 的 访问 效率 。 

















11.31 本 地 存储 展示 效果 


11.4.3 地理 信息 


地 理 信 息 是 指 可 以 通过 HTMLS 技术 来 获取 到 当前 的 地 理 位置 。 通 过 获取 到 的 经 纬 
度 值 ， 再 配合 第 三 方 的 地 图 API 接口 ， 可 以 展现 当前 应 用 所 在 的 位 置 。 很 多 基于 地 理 位 
置 的 应 用 都 是 通过 地 理 信息 来 实现 的 。 利 用 JavaScript 接口 中 的 geolocation 这 个 方法 可 
以 实现 HTML5 地 理 信息 的 操作 ， 接 下 来 通过 案例 来 演示 ， 具 体 如 例 11-31 所 示 。 

【 例 11-31】 地 理 信息 。 


计 <!DOCTYPE HTML> 

2 <html> 

3 <head> 

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
5 ”<title>HTML5 其 他 功能 </title> 

6 <style> 

#map{ width:400px; height:200px; border:1lpx #000 solid; } 
8 </style> 

9 </head> 

10 <body> 

了 <input type="button" value=" 单 击 " id="input1"> 

2 <br> 

正二 <div id="map"></div> 

14 </body> 

15 <script src="http://api.map.baidu.com/api?v=1.3"></script> 

16 <script> 

ky var oInput = document .getElementById('input1'); 


18 
19 
20 
22 
3 
24 
25 
26 
2 
28 
29 
30 
Eb 
4 
33 
34 
35 
36 
3 
38 
39 
40 
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oInput.onclick = function(){ 
Var timer = 
navigator.geolocation.getCurrentPosition (function (position){ 
Var map = new BMap.Map ("map"); 
Var point = new BMap.Point (position.coords.longitude, 
position.coords.latitude); 
map.centerAndZzoom(point, 15); 
Var marker = new BMap.Marker (point); 
map.addOverlay (marker); 
map.enableScrollWheelZoom (true); 
Var opts = { 
width : 200, 
height: 100, 
title : "天 丰 利 商城" ， 
enableMessage:true, 
message:" 千 锋 教育 ， 单 击 查看 " 
} 
var infoWindow=newBMap.InfoWindow (" 地 址 :北京 市 海淀 葡 宝 盛 北里 西区 28 号 ",opts) ; 
map .openInfoWindow (infoWindow,point); 
} ,function (error)1{ 
console.log (error.code) 
]) 7 
]} 


41 </script> 


在 Chrome 浏览 器 和 正 浏览 器 中 ， 运 行 结果 分 别 如 图 11.32 和 图 11.33 所 示 。 

由 图 11.32 和 图 11.33 可 以 看 出 ， 在 Chrome 浏览 器 中 不 能 显示 相应 的 地 理 信息 ， 这 
是 因为 浏览 器 本 身 限制 了 地 理 信息 的 访问 ， 需 要 浏览 器 服务 器 环境 ， 这 里 不 再 袭 述 ， 只 
了 解 结果 即 可 。 
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图 11.32 ”Chrome 浏览 器 地 理 信息 展示 效果 
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11.33 ”下 浏览 器 地 理 信息 展示 效果 


11.4.4 双 工 通信 


双 工 通信 是 指 可 以 通过 前 端 与 后 端 进行 全 双 工 方式 的 通信 。 利 用 双 工 通信 可 以 实现 
实时 直播 、 在 线 聊 天 、 多 人 游戏 等 项 目的 开发 。 利 用 JavaScript 接口 中 的 Web Socket 这 
个 方法 可 以 实现 HTML5 双 工 通信 的 操作 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 11-32 


所 示 。 


【 例 11-32】 双 工 通信 。 
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<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>HTML5 其 他 功能 </title> 
<style> 
#t1{ width:400px; height:100px; border:lpx #000 solid; } 
</style> 
</head> 
<body> 
<h1> 聊 天 室 </h1> 
<textarea id="t1"></textarea> 


<br> 


运行 结果 如 图 11.34 所 示 。 
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11.34 ” 双 工 通信 展示 效果 


11.5 本 章 小 结 


通过 本 章 的 学 习 ， 了 解 HIMLS 新 版 本 的 特点 与 特性 ， 对 HIMLS 的 历史 和 语法 有 
深刻 的 理解 。 本 章 重点 学 习 HIMLS 的 新 标签 和 新 属性 ， 掌 握 新 标签 和 新 属性 的 用 法 及 
使 用 场景 ， 同 时 了 解 HTMLS5 的 强大 功能 ， 简 化 复杂 的 程序 开发 。 


11.6 己 是 


1. 填空 题 

(1) 用 于 描述 网 页 中 的 页 眉 和 页 脚 的 标签 是 ” 和 
(2) <figcaption> 用 于 描述 图 像 或 视频 的 8 

(3) <audio> 音 频 标签 通过 属性 对 控件 进行 显示 。 
(4) 表单 控件 中 用 于 帮助 用 户 填写 输入 字段 的 提示 信息 的 属性 是 
(5) HTMLS 中 将 <IDOCTYPE> 分 为 种。 


2.， 选择 题 

(1) 下 列 选 项 中 ， 不 属于 HIMLS 新 的 语义 化 标签 的 是 〈 )。 
A. header B. nav 
C. strong D. article 


(2) 为 <audio> 音 频 添加 控件 的 属性 是 (。”)。 
A. controls B. loop 
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C. autoplay D. src 

(3) 下 列 选项 中 ， 不 属于 HTMLS5 新 增 表单 属 性 的 是 ( 。 ”)。 
A. autocomplete B. placeholder 
C. autofocus D. value 


(4) 关于 HMTLS5 的 说 法 正确 的 是 ( 入 
A. HTML5 只 是 对 HTML4 的 一 个 简单 升级 
B. 所 有 主流 浏览 器 都 支持 HTML5 
C. HTML5 新 增 了 离线 缓存 机 制 
D. HTML5 主要 是 针对 移动 端 进行 了 优化 
《57 区 下 《 ) 不 是 input 在 HIMLS 中 的 新 类 型 。 


A. DateTime B. fle 
C. Color D. Range 
3. 思考 题 


(1) 请 简 述 HTML 语义 化 的 意义 。 
(2) 请 简 述 <canvas> 标 签 的 作用 。 





CSS3 基础 样式 


本 章 学 习 目标 

。 了 解 CSS3 特性 和 浏览 器 前 级 等 概念 ; 

。 掌握 CSS3 选择 器 及 使 用 ; 

。 掌握 CSS3 基础 样式 ， 如 背景 、 边 框 、 文 本 等 。 

在 前 面 的 章节 中 ,介绍 过 CSS 的 历史 ， 了 解 CSS3 是 CSS 的 最 新 版 本 ， 前 面 一 直 使 
用 的 CSS 样式 都 是 由 属性 CSS2.1 提供 的 内 容 。 本 章 将 开始 学 习 CSS3 相关 的 内 容 ， 相 
对 于 CSS2.1，CSS3.0 新 增 了 很 多 属性 和 方法 ， 如 : 选择 器 、 文 本 效果 、 背 景 效果 、 动 
画 、3D、 弹 性 盒 模型 等 ， 其 最 大 的 优势 是 对 于 原本 需要 使 用 图 或 JavaScript 实现 的 效果 ， 
CSS3 只 需 几 名 代码 就 可 以 实现 。 


12.1 测 览 颖 前 组 


浏览 器 前 级 是 针对 老式 浏览 器 的 一 种 写法 ， 在 CSS3 尚未 标准 化 时 ， 这 些 浏览 器 已 
经 开始 使 用 浏览 器 前 级 。 为 此 ，CSS3 提供 了 针对 浏览 器 的 前 级 ， 当 某 些 CSS3 样式 语法 
变动 时 ， 可 以 使 用 这 些 前 级 ， 使 浏览 器 在 非 标 准 前 提 下 正常 运行 。 

根据 浏览 器 内 核 的 不 同 ， 浏 览 器 前 绷 的 设置 也 有 不 同 ， 常 见 的 浏览 器 前 缀 如 表 12.1 


表 12.1 常见 浏览 器 前 缀 








内 核 前 组 
Trident 内 核 : 主要 代表 为 正 浏览 器 -ms- 
Gecko 内 核 : 主要 代表 为 Firefox 浏览 器 -moz- 
Presto 内 核 : 主要 代表 为 Opera 浏览 器 < 
Webkit 内 核 : 产 要 代表 为 Chrome 和 Safari 浏览 器 -Webkit- 





先 来 通过 一 个 CSS3 样式 了 解 如 何 添加 浏览 器 前 级 , border-radius 样式 可 设置 为 圆 角 
边框 样式 。 具 体 示 例如 下 。 


<style> 
-webkit-border-radius:10px; /* 兼 容 Chrome 和 Safari*/ 
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—moz-border-radius:10px; /* 兼 容 Firefox*/ 

-ms-border-radius:10px7 /* 兼 容 IE*/ 

—o-border-radius:10px; /* 兼 容 Opera*/ 
</style> 


当然 在 现代 浏览 器 中 ， 一 般 浏览 器 前 级 都 可 以 被 省 略 掉 ， 直 接 使 用 CSS3 标准 写法 
即 可 。 具 体 示例 如 下 。 
<style> 
border-radius:10px; /* 标 准 写法 */ 
</style> 


12.2 CSS3 选择 颖 


在 前 面 的 章节 中 , 介绍 过 CSS 的 选择 器 , 如 id 选择 器 、class 选择 器 、tag 选择 器 等 。 
CSS3 在 CSS2.1 的 基础 上 增加 了 很 多 实用 的 选择 器 , 使 操作 HTML 元 素 的 方式 更 加 灵活 
简单 。 


12.2.1 属性 选择 器 


属性 选择 器 是 通过 属性 来 选择 元 素 的 一 种 方式 ， 在 下 述 代码 中 type 和 value 都 是 
input 元 素 的 属性 。 接 下 来 通过 案例 来 演示 如 何 设置 属性 选择 器 ， 具 体 如 例 12-1 所 示 。 
【 例 12-1】 设置 属性 选择 器 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 选择 器 </title> 
<style> 
input [value]{ background:red; color:white; } 
</style> 
</head> 
10 <body> 
11 <input type="text"> 
12 <input type="text" value="HTML"> 


Doomwamuwm 必 wmN 


13 <input type="text"> 
14 </body> 
15 </html> 


运行 结果 如 图 12.1 所 示 。 
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HTML 




















图 12.1 属性 选择 器 展示 效果 


属性 选择 器 的 写法 是 通过 中 括号 的 方式 进行 选择 的 ， 也 可 以 在 中 括号 内 把 属性 和 属 
性 值 写 完整 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 12-2 所 示 。 
【 例 12-2】 在 中 括号 中 将 属性 和 属性 值 书写 完整 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 选择 器 </title> 
<style> 
input [value=HTML] { background:red; color:white; } 
</style> 
</head> 
10 <body> 
11 <input type="text" value="HTML"> 
12 <input type="text" value="HTML"> 
13 <input type="text"> 
14 </body> 
15 </html> 


运行 结果 如 图 12.2 所 示 。 


BO NN 








> [wo file:///D:/HIMLexample/chapter12/12-2.html 会 








HTML HTML 














12.2 属性 选择 器 展示 效果 


除了 具体 的 属性 选择 器 外 ，CSS3 还 提供 了 三 种 模糊 匹配 的 属性 选择 器 ， 下 面 将 分 
别 讲解 三 种 模糊 匹配 的 属性 选择 器 。 

(1) [attr'=value] 匹 配 的 是 起 始 位 置 包含 value 值 形式 的 元 素 。 接 下 来 通过 案例 来 演 
示 ， 具 体 如 例 12-3 所 示 。 
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【 例 12-3】 [attr^=value] 匹 配 的 属性 选择 器 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 选择 器 </title> 
<style> 
input [value^=HTML]{ background:red; color:white; } 
</style> 
</head> 
10 <body> 
11 <input type="text" value="HTML Language"> 
12 <xinput type="text" value="HELLO HTML"> 
13 <input type="text" value="CSS HTML JS"> 
14 </body> 
15 </html> 


运行 结果 如 图 12.3 所 示 。 


BD i WY 


口 css3 选 择 器 


€ > © | O file:///D:/HmtLexanple/chapterl2/12-3.html 人 衣 | : 














HELLO HTML 


CSS HTML JS 


























12.3 ”属性 选择 器 展示 效果 


(2) [attr$=value] 匹 配 的 是 结束 位 置 包含 value 值 形式 的 元 素 。 下 面 将 例 12-3 第 7 行 
代码 更 改 如 下 。 


input [value$="HTML"]{ background : red; color : white; } 


保存 HIML 文件 ， 刷 新 页 面 ， 效 果 如 图 12.4 所 示 。 





站 css3 选 择 器 





> CG | @ £ile:///D:/HTML exanple/chapter12/12-5. htnl 女 | : 


HTML Language HELLO HTML 


CSS HTML JS 


























12.4 ”属性 选择 器 展示 效果 


(3) [attr*=value] 匹 配 的 是 任意 位 置 包 含 value 值 形式 的 元 素 。 下 面 将 例 12-3 第 7 行 
代码 更 改 如 下 。 


364 TML5 从 入 门 到 精通 


input[value*="HTML"]{ background : red; color : white; } 


这 时 保存 HTML 文件 ， 刷 新 页 面 ， 效 果 如 图 12.5 所 示 。 


四 css3 选 择 器 x MN 











© IO file:///D:/HIMLexample/chapter12/12-5. html 女 | : 


HTML Language HELLO HTML 
CSS HTML JS 





12.5 ”属性 选择 器 展示 效果 


12.2.2 ”结构 伪 类 选择 器 


结构 伪 类 选择 器 是 针对 HTML 层次 “结构 ”的 伪 类 选择 器 。 如 想 要 某 一 个 父 元 素 下 
面 的 第 n 个 子 元 素 ， 则 可 以 通过 以 下 儿 种 结构 伪 类 选择 器 实现 。 

(1) 第 一 类 结构 伪 类 选择 器 *-child 方式 。 其 分 类 如 表 12.2 所 示 。 
表 12.2 *-child 伪 类 选择 器 分 类 

选 择 器 言 湾 
: first-child 选择 器 选择 父 元 素 的 第 一 个 子 元 素 
: last-child 选择 器 选择 父 元 素 的 最 后 一 个 子 元 素 
nth-child(n) 选 择 器 选择 父 元 素 下 的 第 个子 元 素 
”Eonly-child 选择 器 ”| 选择 父 元 素 中 唯一 的 子 元 素 (该 父 元 素 只 有 一 个 子 元 素 时 才 可 以 选择 ) 








表 12.2 中 ，E:nth-child(n) 选 择 器 ， 可 以 设置 一 组 元 素 中 指定 子 项 的 样式 ， 其 参数 可 
以 设置 为 数字 行 ， 也 可 以 设置 为 odd 奇数 行 和 even 偶数 行 ， 另外 还 可 以 将 参数 设置 为 n 
值 ( 从 零 累 加 的 值 )。 注 意 ，E:nth-child(n) 选 择 器 的 参数 是 从 1 开始 ， 而 不 是 0。 接 下 来 
通过 案例 来 演示 E:nth-child(n) 选 择 器 参数 为 n 值 ， 具 体 如 例 12-4 所 示 。 

【 例 12-4】 E:nth-child(n) 选 择 器 参数 为 n 值 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 选择 器 </title> 

<style> 
li:nth-child(3n){ background:red; } 

</style> 

</head> 

<body> 

<ul> 


Domwaoum 必 wmn 


F， 上 
-Po 
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12 <l1i>HTML</1i> 

3 <1i>CSS</1i> 

14 <li>JavaScript</1i> 
15 <l1i>HTML</1i> 

16 <li>CSss</1i> 

7 <li>JavaScript</1i> 
18 </ul> 

19 </body> 

20 </html> 


运行 结果 如 图 12.6 所 示 。 














12.6 E: nth-child 设置 为 
(2) 第 二 类 结构 伪 类 选择 器 *-of-type 方式 。 其 分 类 如 表 12.3 所 示 。 
表 12.3 *-of-type 伪 类 选择 器 分 类 





选 择 器 售 ， 光 
E:first-of-type 选择 器 选择 同 元 素 类 型 的 第 一 个 同 级 兄弟 元 素 
E:lastof-type 选择 器 选择 同 元 素 类 型 的 最 后 一 个 同 级 兄弟 元 素 
Enth-of-type (n) 选 择 器 型 的 第 n 个 同 级 兄弟 元 素 
E:only-of-type 选择 器 选择 同 元 素 类 型 中 唯一 的 同 级 兄弟 元 素 


表 12.3 中 E:first-of-type、E:last-of-type、E:nth-of-type(n)、E:only-of-type 与 第 一 类 
*#-child 效果 相同 。*-of-type 选择 器 与 *-child 选择 器 不 同 的 是 *-of-type 表示 选择 同 元 素 类 
型 同 级 兄弟 元 素 ， 而 *-child 表示 选择 父 元 素 的 子 元 素 。 接 下 来 通过 案例 来 演示 两 者 的 区 
别 ， 具 体 如 例 12-5 所 示 。 

【 例 12-5】 *-oftype 选择 器 与 *-child 选择 器 的 区 别 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>CSS3 选择 器 </title> 


wm 必 wwN PP 
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6 <style> 

学 p:nth-of-type(3){ background:red; } 
8 p:nth-child(3){ background:blue; } 
9 </style> 

10 </head> 

11 <body> 


12 <p>HTML</p> 

13 <div>Css</div> 

14 <p>JavaScript</p> 
15 <p>PHP</p> 

16 </body> 

17 </html> 


运行 结果 如 图 12.7 所 示 。 


了 css 选择 器 x 业 


GG |© file:///D:/HTMLexample/chapter12/12-5.html 食 





HTML 


CSS 
PHP 





12.7 ”*-child 选择 器 与 *-of-type 选择 器 的 区 别 
图 12.7 中 可 以 看 到 会 选择 同 级 中 同 元 素 类 型 的 第 三 个 <p> 标 签 。 而 *-child 是 父 元 素 
中 的 第 三 个 元 素 ， 因 此 要 选择 到 <P>JavaScript</p> 标 签 。*-child 选择 器 是 选择 父 元 素 下 
的 子 元 素 (不 区 分 元 素 类 型 ), 而 *-of-type 选择 器 是 选择 父 元 素 下 某 个 同 元 素 类 型 的 子 元 
素 〈 区 分 元 素 类 型 )。 


12.2.3 ”状态 伪 类 选择 器 


状态 伪 类 选择 器 是 一 种 针对 HTML 当前 操作 状态 而 进行 选择 的 选择 器 , 如 标签 是 否 
获取 焦点 、 标 签 是 否 被 选中 等 。 其 分 类 及 用 途 如 表 12.4 所 示 。 

表 12.4 *-child 伪 类 选择 器 分 类 
合 文 


用 于 指定 “表单 元 素 ” 获 得 光标 焦点 时 使 用 
的 样式 











选 择 器 






用 途 
主要 在 单行 文本 框 text、 多 行文 本 
框 textarea 等 表单 元 素 获得 焦点 并 
输入 文本 时 使 用 

主要 在 单 选 按钮 radio 和 复 选 框 
checkbox 中 使 用 

主要 在 段落 标签 中 使 用 





:focus 选择 器 








:checked 选择 器 | “表单 元 素 ” 被 选中 时 使 用 的 样式 
::selection 选择 器 “| 用 于 改变 被 选择 的 网 页 文本 的 显示 效果 
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续 表 

选 择 器 含义 用 途 
-first-letter 选择 器 “| 用 于 对 一 段 文本 的 第 一 个 字符 进行 样式 设置 | 主要 在 段落 标签 中 使 用 
-first-line 选择 器 “| 用 于 对 一 段 文本 的 第 一 段 字符 进 行 样式 设置 | 主要 在 段落 标签 中 使 用 
- 本 一 www | 主要 在 单行 文本 框 text、 多 行文 本 
:enabled 选择 器 。 | 用 于 设置 “表单 元 素 ” 中 可 用 元 素 的 样式 “| 杠 textea 等 天 单元 素 中 使 用 
，，，， www ”| 用 于 对 “表单 元 素 ” 中 不 可 用 元 素 进行 样式 | 主要 在 单行 文本 框 text、 多 行文 本 
训 sbled 池 择 吕 wr 框 fextarea 等 表单 元 素 中 使 用 
-read_write 选择 器 | 用 于 对 “表单 元 素 ”中 可 读 写 的 元 素 进 行 深 | 主要 在 单行 文 本 框 text、 多 行文 本 
es 框 textarea 等 表单 元 素 中 使 用 
:read-only 选择 器 用 于 对 “表单 元 素 ” 中 只 读 的 元 素 进行 添加 | 主要 在 单行 文本 框 text、 多 行文 本 
: 了 | 样式 设置 框 textarea 等 表单 元 素 中 使 用 

表 12.4 中 的 ::selection 选择 器 用 于 改变 被 选择 的 网 页 文本 的 显示 效果 。 在 默认 情况 
下 ， 浏 览 器 中 用 鼠标 选择 的 网 页 文本 都 是 以 “深蓝 的 背景 ， 白 色 的 字体 ”显示 的 。 通 


过 ::selection 选择 器 ， 可 以 改变 被 选择 的 网 页 文本 。 注 意 ，::selection 选择 器 前 面 


号 。 接 


下 来 通过 案例 来 演示 ::selection 选择 器 的 使 用 ， 有 具体 如 例 12-6 所 示 。 


【 例 12-6】 selection 选择 器 的 使 用 。 


omwamm 必 wm 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 选择 器 </title> 

<style> 
p{ width:300px; font-size:14px; text-indent:28px; } 
p::selection{ background:red; color:yellow; } 

</style> 

</head> 

<body> 





为 双 引 


<p> 千 锋 教育 隶属 于 北京 千 锋 互联 科技 有 限 公司 ， 一 直 秉 承 "用 良心 做 教育 "的 理念 ， 


是 中 国 IT 职业 教育 领先 品牌 , 全 力 打 造 互联 网 技术 型 研发 人 才 服 务 优质 平台 


</body> 
</html> 


行 结果 如 图 12.8 所 示 。 





9 
Dcsss 选 择 器 | 








已 1O ile:N/D:/HM erzarple/chapteri2/12-6.btml 合 | 三 


于 锋 教育 未 属于 北京 千 锋 与 联 科技 有 限 公 





5 性， 全 力 打 造 互联 网 技术 型 研发 
| 人才 服务 优质 平谷 





图 12.8 :selection 选择 器 显示 效果 


。</p> 
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12.2.4 ”其 他 选择 器 





CSS 选择 器 除 属 性 选择 器 、 结 构 伪 类 选择 器 、 状 态 伪 类 选择 器 外 ， 还 提供 其 他 三 个 
的 选择 器 ， 如 表 12.5 所 示 。 


表 12.5 三 个 其 他 选择 器 











选 择 器 含 义 
一 选择 器 | 选择 元 素 后 的 所 有 兄弟 元 素 

十 选择 器 选择 元 素 后 最 近 的 兄弟 元 素 

> 选择 器 只 选择 子 元 素 ， 对 于 深层 嵌 套 的 子 元 素 不 会 选择 





接 下 来 通过 案例 来 演示 表 12.5 中 列 出 的 其 他 选择 器 ， 具 体 如 例 12-7 所 示 。 
【 例 12-7】 其 他 三 个 选择 器 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 选择 器 </title> 
<style> 

div ~p{ background:red; } 

span +p{ background:blue; } 

#box > li{ border:1lpx red solid; } 
</style> 
</head> 
<body> 
<span>PHP</span> 
<p>HTML</p> 
<div>Css</div> 
<p>HTML</p> 
<p>HTML</p> 
<ul id="box"> 

< 

<ul> 
<1i></1i> 
Ty 
</ul> 

</1i> 

<1i></1i> 
</ul> 
</body> 
</html> 


Oo Dpre 





Oo Po 


DDNDNDNDNNNND 
OA Po 
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运行 结果 如 图 12.9 所 示 。 














口 css3 选 择 器 
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图 12.9 其 他 选择 器 设置 样式 
12.3 CSS3 文本 属性 


CSS3 增加 了 丰富 的 文本 修饰 效果 ， 使 网 页 看 起 来 更 加 美观 舒服 。 下 面 将 学 习 常 见 
的 CSS3 文本 属性 。 


12.3.1 text-shadow 属性 


一 般 情 况 下 ，CSS2 都 是 使 用 Photoshop 等 工具 来 实现 文字 的 阴影 效果 ， 而 在 CSS3 
中 ， 这 种 效果 可 通过 设置 text-shadow 属性 来 实现 ， 简 单 好 用 。 
text-shadow 属性 可 设置 的 样式 值 有 x-offset、y-offset、blur、color 这 四 个 值 ， 其 值 
含义 及 用 法 如 表 12.6 所 示 。 
表 12.6 text-shadow 属性 取 值 及 用 法 


属性 值 含义 单 位 用 法 
i 二 二 仆人 | 值 为 正 ， 阴 影 向 右 偏 移 
x-offset | 阴影 的 水 平 偏 移 距离 | px、em 或 百分比 等 值 为 负 ， 阴 影 向 左 偏 移 


本 .an | 值 为 正 ， 阴 影 向 下 偏 移 
y-offset | 阴影 的 垂直 偏 移 距离 | px、em 或 百分比 等 值 为 负 ， 阴 影 向 上 偏 移 


值 不 能 为 负 ， 值 为 0， 无 阴影 模糊 效果 
px、em 或 百分比 等 | 值 越 大 ， 阴 影 越 模糊 
值 越 小 ， 阴 影 越 清晰 














blur 阴影 的 模糊 程度 











color 阴影 的 颜色 三 种 颜色 表示 方法 
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text-shadow 属性 同时 还 支持 多 阴影 的 设置 。 通 过 多 阴影 设置 可 以 设计 出 很 多 炫 酷 的 
效果 ， 接 下 来 通过 案例 演示 多 阴影 设置 实现 火焰 文字 效果 ， 有 具体 如 例 12-8 所 示 。 
【 例 12-8】 多 阴影 设置 实现 火焰 文字 效果 。 


1 <!doctype html> 

之 <html> 

<head> 

4 <meta charset="utf-8"> 

5 ”<title>CSss3 文 本 属性 </title> 

6 <style> 

这 div{ font-size:30px; margin:20px; 

8 text-shadow:0 0 4px white, 0 -5px 4px #ff3, 
9 2px -10px 6px #fd3, -2px -15px llpx #f80， 
10 2px -25px 18px #f207 } 

11 </style> 

12 </head> 

13 <body> 

14 <div>hello CSS3</div> 

15 </body> 

16 </html> 


运行 结果 如 图 12.10 所 示 。 


有 css: 文 本 属性 











GC | © ile:///D: /HM example/chapter12/12-6. html 盆 | : 


hello Css3 


图 12.10 ”text-shadow 实现 火焰 字 


12.3.2 text-stroke 属性 


text-stroke 属性 用 于 设置 文字 的 描 边 ,可 设置 的 样式 值 有 w 和 color 这 两 个 值 。w 表 
示 描 边 的 宽度 ，color 表示 描 边 的 颜色 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 12-9 所 示 。 
【 例 12-9】 text-stroke 属性 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>CSS3 文本 属性 </title> 


wm 必 mwN PP 
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12.11 text-stroke 设置 文字 的 描 边 


12.3.3 direction 属性 


direction 属性 用 于 设置 文字 的 排列 方向 ， 可 设置 的 样式 值 有 rt 和 ltr 两 个 值 。rtl 表 
示 文 字 从 右 向 左 排列 ，ltr 表示 文字 从 左 向 右 排列 。 需 要 配合 表示 排版 方式 的 CSS 语法 
unicode-bidi:bidi-override 属性 和 属性 值 实现 。 接 下 来 通过 案例 来 演示 direction 属性 ， 具 
体 如 例 12-10 所 示 。 

【 例 12-10】 direction 属性 。 
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运行 结果 如 图 12.12 所 示 。 
[EE 
名 cs 文 本 属性 = ee a 


© | © file: /DD:/HTMLerarple/chapter12/12-10, btnl 辫 | : 














3SSC olleh 


12.12 ”direction 属性 展示 效果 


12.3.4 ”@font-face 属性 


@font-face 属性 表示 字体 图 标 ， 主 要 实现 网 页 中 图 标的 展现 效果 。 字 体 图 标 可 以 提 
高 网 页 的 性 能 以 及 方便 地 控制 图 标 大 小 和 颜色 变化 。 字 体 图 标的 效果 如 图 12.13 所 示 。 


筷 的 下 三 -雪夫 关 注 的 品牌 ”下 砍 怕 寺 0 件数 宇 去 ”| 日 寺 机 版 
12.13 ”天 猫 官 网 导航 字体 图 标 效果 


图 12.13 的 导航 中 的 小 图 标 就 是 用 字体 图 标 实 现 的 ， 可 以 通过 代码 来 改变 图 标的 颜 
色 和 大 小 ， 如 图 12.14 所 示 。 


我 的 海 计 + ”网 生 关 注 的 品评 要 风 煌 和 0 件 。 收 主 去 + | 日 汉王 
图 12.14 字体 图 标 修改 颜色 和 大 小 


@font-face 属性 主要 可 设置 font-family 和 src 两 个 值 。font-family 属性 用 来 设置 字 
体 名 称 ，src 属性 用 来 设置 字体 文件 路 径 。 接 下 来 通过 案例 来 演示 @font-face 属性 ， 具 体 
如 例 12-11 所 示 。 

【 例 12-11】 @font-face 属性 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 文 本 属性 </title> 
<style> 
Q@font-face{ font-family : mui-global-iconfont; 
src:url (http://at.alicdn.com/t/font 1401963178 8135476.eot); 
src:url (http://at.alicdn.com/t/font 1401963178 8135476.eot?#iefix) 
format ('embedded-opentype'), 
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10 url (http://at.alicdn.com/t/font 1401963178 8135476.woff) format ('woff'), 

Ll url (http://at.alicdn.com/t/font 1401963178 8135476.ttf) format 
('truetype'), 

4 url (http://at.alicdn.com/t/font 1401963178 8135476.svg#iconfont) 
format ('svg') } 

13 div{ font-family : mui-global-iconfont; 

14 font-size : 60px; color : red; } 

5 div:before{ content : " 侦 "; } 

16 </style> 

17 </head> 

18 <body> 

19 <div></div> 

20 </body> 

21 </html> 


运行 结果 如 图 12.15 所 示 。 
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12.15 ”@font-face 设置 字体 图 标 


首先 写 出 一 个 载 入 字体 的 HIML 标签 ， 然 后 把 标签 的 font-family 样式 设置 成 
@font-face 属性 当中 的 字体 名 称 。 在 元 素 中 添加 对 应 图 标的 文字 ， 最 终 HTML 标签 中 的 
文字 在 浏览 器 中 会 显示 成 对 应 图 标的 效果 。 字 体 图 标 是 由 文字 转换 的 ， 即 可 以 设置 文字 
相关 的 属性 ， 如 文字 大 小 和 文字 颜色 。 

另外 ， 可 以 设计 一 套 字 体 图 标 ， 如 通过 IcoMoon 软件 来 进行 文字 与 图 标的 转化 。 通 
过 第 三 方 库 来 获取 大 量 的 字体 图 标 。 目 前 比较 流行 的 库 是 Font-Awesome, 它 提供 了 上 千 
种 对 应 的 字体 图 标 ， 能 够 非常 方便 快捷 地 进行 设置 操作 。 





12.4 CSS3 背景 属 性 


在 CSS2.1 中 ,学 习 了 很 多 关于 背景 的 属性 , 如 background-image、background-position 
等 。 在 CSS3 中 ， 为 了 满足 更 多 的 需求 ， 新 增 了 多 个 新 的 背景 属性 ， 它 们 提供 了 对 背景 
更 强大 的 控制 。 
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12.4.1 background-size 属性 


background-size 属性 用 于 设置 背景 图 片 大 小 。 在 CSS3 诞生 之 前 ， 背 景 图 片 的 大 小 
是 由 图 片 的 实际 大 小 决定 。 在 CSS3 中 ， 可 以 使 用 background-size 属性 来 设置 背景 图 片 
的 大 小 ， 这 使 得 在 不 同 的 环境 中 重复 使 用 背景 图 片 成 为 可 能 。background-size 取 值 及 设 
置 图 片 方式 如 表 12.7 所 示 。 


表 12.7 background-size 取 值 及 设置 背景 图 片 方式 
设置 背景 图 片 方式 
可 分 别 设置 背景 图 片 的 宽 高 的 大 小 
将 背景 图 片 以 等 比 缩放 来 填充 整个 容器 元 素 
将 背景 图 片 等 比例 缩放 至 某 一 边 紧 贴 容器 边缘 为 止 


属性 取 值 
number 
cover ( 履 盖 方 式 ) 
content (包含 方式 ) 














图 12.7 中 列 出 了 background-size 取 值 及 设置 背景 图 片 的 方式 , 接 下 来 通过 案例 来 演 
示 background-size 属性 的 使 用 ， 具 体 如 例 12-12 所 示 。 
【 例 12-12】 background-size 属性 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 背景 属性 </title> 
<style> 
#divl{ width:300px; height:80px; border:lpx black solid; 
background:url (qianfeng.jpg) no-repeat; 
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background-size:100px 50px; } 

#div2{ width:300px; height:80px; border:lpx black solid; 
background:url (qianfeng.jpg) no-repeat; 
background-size:cover; } 

#div3{ width:300px; height:80px; border:lpx black solid; 
background:url (qianfeng.jpg) no-repeat; 
background-size:contain; } 

</style> 
</head> 
<body> 
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19 <div id="div1"></div><br/> 
20 <div id="div2"></div><br/> 
21 <div id="div3"></div> 

22 </body> 

23 </html> 


运行 结果 如 图 12.16 所 示 。 





























到 最 高 的 山上 ， 本 
一 次 仔 只 能 印 路 买好 地 迈 一 步 。 


到 最 高 的 山上 ， 二 
一 次 耻 只 能 肝 跌 实 坟 及 还 一 步 








12.4.2 background-origin 属性 


在 CSS3 中 ， 可 使 用 background-origin 属性 设置 元 素 背景 图 片 平 铺 的 最 开始 位 置 。 
background-origin 属性 的 取 值 及 平 铺 方式 如 表 12.8 所 示 。 


表 12.8” background-origin 取 值 及 平 铺 方式 





属性 取 值 平 铺 方 式 
padding-box (默认 值 ) 背景 图 片 从 内 边 距 开 始 平 铺 
border-box 背景 图 片 从 边框 开始 平 铺 
content-box 背景 图 片 从 内 容 区 域 开始 平 铺 


表 12.8 中 列 出 了 background-origin 属性 取 值 及 平 铺 方式 ， 接 下 来 通过 案例 来 演示 
background-origin 属性 取 值 及 平 铺 方式 ， 具 体 如 例 12-13 所 示 。 
【 例 12-13】 background-origin 属性 值 及 平 铺 方式 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 背景 属性 </title> 

<style> 

#divl{ width:300px; height:50px; padding:30px; 

border:30px rgba(0,0,0,0.1) solid; 
background:url (qianfeng.jpg) no-repeat; 
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10 background-origin:padding-box; } 

站 #div2{ width:300px; height:50px; padding:30px; 
bes border:30px rgba(0,0,0,0.1) solid; 

13 background:url (qianfeng.jpg) no-repeat; 

14 background-origin:border-box; } 

ES #div3{ width:300px; height:50px; padding:30px; 
16 border:30px rgba(0,0,0,0.1) solid; 

47 background:url (qianfeng.jpg) no-repeat; 

18 background-origin:content-box; } 

19 </style> 

20 </head> 

21 <body> 


22 <div id="divl"></div><br/> 
23 <div id="div2"></div><br/> 
24 <div id="div3"></div> 

25 </body> 

26 </html> 


运行 结果 如 图 12.17 所 示 。 








一 次 也 只 能 妓 路 实地 地 迈 一 步 
一 一 干 锋 成功 心 二 血 - 


邑 ， 
一 次 也 只 能 脚踏实地 地 迈 一 步 。 
一 一 干 锋 成 功 心 语 





12.17 _ background-origin 不 同 取 值 展示 效果 


12.4.3 background-clip 属性 


在 CSS3 中 , 可 以 使 用 background-clip 属性 来 设置 元 素 背景 图 片 平 铺 后 剪 切 的 位 置 。 
background-clip 属性 取 值 及 前 切 方式 ， 如 表 12.9 所 示 。 


表 12.9 background-clip 取 值 及 剪 切 方式 
剪 切 方式 





属性 取 值 












borderbox (默认 值 ) 平 铺 的 背景 图 片 从 边框 开始 剪 切 
padding-box 平 铺 的 背景 图 片 从 内 边 距 开始 剪 切 





平 铺 的 背景 图 片 从 内 容 区 域 开 始 剪 切 





content-box 





表 12.9 列 出 了 background-clip 属性 取 值 及 剪 切 方式 ， 接 下 来 通过 案例 来 演示 
background-clip 属性 取 值 及 前 切 方式 ， 具 体 如 例 12-14 所 示 。 
【 例 12-14】 background-clip 属性 取 值 及 前 切 方式 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 背景 属性 </title> 

<style> 

#divl{ width:300px; height:80px; padding:30px; 

border:30px rgba(0,0,0,0.1) solid; 
background:url (qianfeng.jpg) no-repeat; 
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background-clip:border-box; } 

#div2{ width:300px; height:80px; padding:30px; 
border:30px rgba(0,0,0,0.1) solid; 
background:url (qianfeng.jpg) no-repeat; 
background-clip:padding-box; } 

#div3{ width:300px; height:80px; padding:30px; 
border:30px rgba(0,0,0,0.1) solid; 


background:url (qianfeng.jpg) no-repeat; 
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18 background-clip:content-box; } 
9 </style> 

20 </head> 

21 <body> 

22 <xdiv id="divil"></div><br> 





23 <div id="div2"></div><br> 
24 <div id="div3"></div> 

25 </body> 

26 </html> 
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运行 结果 如 图 12.18 所 示 。 
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E 最 高 的 山上 ， 
。 一 次 也 只 能 肝 路 实地 地 迈 一 步 。 
er 一 一 一 一 玉生 成 功 心 


一 次 也 只 能 县 路 实地 地 迈 一 步 。 
一 一 干 狠 成 功 心 诬 


最 高 的 山上 ， 
| 


图 12.18 ” background-clip 不 同 取 值 展示 效果 
12.5 CSS3 颜色 属性 


在 网 页 中 经 常 可 以 看 到 各 种 的 渐变 效果 ， 包 括 渐变 背景 、 渐 变 导 航 、 渐 变 按钮 等 。 
在 网 页 中 添加 渐变 效果 ， 可 使 网 页 在 视觉 上 更 加 美观 大 方 ， 同 时 提升 用 户 体 验 。 下 面 将 
讲解 CSS3 提供 的 颜色 渐变 属性 。 


12.5.1 linear-gradient 属性 


linear-gradient 属性 表示 线性 渐变 ， 是 指 在 一 条 直线 上 进行 渐变 。 在 网 页 中 大 多 数 渐 
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变 效果 都 是 线性 渐变 。lineargradient 属性 需要 通过 background-image 属性 进行 设置 ， 可 
设置 渐变 方向 、 起 始 颜色 、 结 束 颜 色 这 三 个 值 。 其 具体 设置 方式 如 下 。 
。 起 始 颜 色 会 渐变 到 结束 颜色 ， 也 可 以 通过 设置 多 个 颜色 值 进 行 线性 渐变 。 
。 渐变 方向 在 第 一 个 参数 设置 。 可 选择 to left、to right、to top、to bottom 等 值 。 也 
可 以 设置 方向 的 一 个 组 合 使 用 ， 如 to left top 方向 值 。 渐 变 方向 还 可 以 设置 一 个 
旋转 的 角度 。 正 值 为 顺 时 针 旋 转 ， 负 值 为 逆 时 针 旋 转 。 
。 线性 渐变 的 颜色 位 置 ， 可 通过 百分比 划分 渐变 的 区 域 大 小 。 
接 下 来 通过 案例 来 演示 linear-gradient 属性 的 不 同 设置 效果 ， 有 具体 如 例 12-15 所 示 。 
【 例 12-15】 linear-gradient 属性 的 不 同 设置 效果 。 








<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 颜色 属性 </title> 

<style> 
#divl{ width:200px; height:150px; 

background-image:1inear-gradient (to left top, red, yellow, blue); } 

#div2{ width:200px; height:150px; 
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0 background-image:linear-gradient (90deg, red, yellow, blue); } 
EE #div3{ width:200px; height:150px; 

2 background-image:linear-gradient (red 10%, blue 90%); } 
3 </style> 

14 </head> 

15 <body> 

6 <div id="divl"></div><br> 

7 <div id="div2"></div><br> 

8 <xdiv id="div3"></div> 

9 </body> 

20 </html> 





运行 结果 如 图 12.19 所 示 。 

第 一 个 <div> 标 签 颜色 从 右 下 角 开 始 向 左上 角 进 行 渐变 处 理 。 第 二 个 <div> 标 签 中 
颜色 渐变 顺 时 针 旋 转 ， 第 三 个 <div> 标 签 渐变 的 0% 一 10% 为 纯 红色 ， 渐 变 的 90% 一 100% 
为 纯 蓝 色 , 而 10% 一 90% 为 渐变 过 程 。 当 红色 和 蓝 色 都 设置 为 50% 时 ， 两 色 并 没有 距离 ， 
因此 看 不 到 渐变 的 过 程 ， 只 能 显示 两 种 纯 颜色 效果 ， 即 可 实现 在 一 个 元 素 上 设置 两 种 
颜色 。 
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一 
» 请 csss 颜 色 属性 x 到 - 
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12.19 渐变 展示 效果 


12.5.2 radial-gradient 属性 


radial-gradient 属性 表示 径 向 渐变 ， 是 一 种 颜色 从 起 点 到 终点 由 内 至 外 进行 圆 形 渐变 
〈 从 中 间 向 外 拉 ， 像 圆 一 样 )， 其 基本 用 法 与 线性 渐变 类 似 。 起 始 颜色 会 渐变 到 结束 颜色 ， 
也 可 以 设置 多 个 颜色 值 进行 径 向 渐变 ， 但 径 向 渐变 的 方向 设置 尚 不 完善 ， 需 要 添加 浏览 
器 前 缀 才 可 以 实现 ， 并 且 不 支持 to 的 方式 ， 只 支持 方向 的 设置 。 接 下 来 通过 案例 来 演示 
radial-gradient 属性 ， 具 体 如 例 12-16 所 示 。 
【 例 12-16】 radial-gradient 属性 。 





<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>Css3 颜色 属性 </title> 

<style> 
#divl{ width:200px; height:150px; 

background-image:radial-gradient (red, yellow, blue); } 

#div2{ width:200px; height:150px; 
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10 background-image:-webkit-raqial-gradient (left,red,yellow,blue)7} 
11 </style> 

12 </head> 

13 <body> 

14 <div id="divl"></div><br> 

15 <div id="div2"></div> 

16 </bod 


行 结果 如 图 12.20 所 示 。 
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12.20 设置 径 向 渐变 颜色 值 





12.6 CSS3 这 框 属性 
在 CSS3 中 对 边框 增加 了 丰富 的 修饰 效果 ， 使 网 页 在 视觉 上 更 加 美观 舒服， 提升 用 
户 体验 。 


12.6.1 border-radius 属性 


在 很 多 网 站 中 ， 圆 角 的 效果 十 分 常见 。 从 用 户 体验 方面 来 看 ， 圆 角 效 果 在 视觉 上 更 
为 美观 大 方 ， 如 图 12.21 所 示 。 


天 独 己 3 和 2 天 漠 起 市 。 淘 抢 购 电器 城 司法 拍卖 
图 12.21 淘宝 官网 圆 角 导航 
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在 CSS2.1 中 ， 给 元 素 实现 
由 于 CSS3 中 border-radius 属性 的 出 现 ， 完 美 地 解决 了 
此 外 ， 在 前 端 开 发 中 ， 对 于 网 页 设计 ， 始 终 秉 着 “尽量 少 用 图 片 ”的 原则 ， 即 能 用 











圆 角 效果 都 是 使 用 背景 图 片 来 实现 ， 制 作 起 来 比较 麻烦 。 
圆 角 效果 难以 实现 的 问题 。 





CSS 实现 的 效果 , 就 尽量 不 要 使 用 图 片 。 因 为 图 片 需要 引发 http 请 求 , 并 且 其 传输 量 大 ， 


影响 网 页 加 载 性 能 。 


border-radius 属性 为 元 素 添 加 圆 角 效果 。 长 度 值 可 以 是 px、 百分比 、em 等 。 当 设置 


的 值 越 大 时 ， 圆 角 就 越 明 显 。 


border-radius 属性 中 的 数值 代表 这 一 个 


圆 形 的 








# 径 ， 这 个 


圆 形 与 元 素 相 切 就 形成 了 圆 角 的 大 小 。 如 果 把 一 个 元 素 宽 、 高 都 为 150px 的 正方 形 转 化 
成 圆 形 , 则 可 以 设置 border-radius 属性 值 为 75px。 接 下 来 通过 案例 来 演示 , 具体 如 例 12-17 


所 示 。 


【 例 12-17】 使 用 border-radius 属性 将 元 素 转 化 成 圆 形 。 


<!doctype html> 
<html> 
<head> 


<style> 
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</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 
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心 wN Ph 口 


<meta charset="utf-8"> 
<title>CSS3 边框 属性 </title> 


div{ width:150px; height:150px; 
background:red; border-radius:75px; 


运行 结果 如 图 12.22 所 示 。 
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12.22 border-radius 实现 圆 形 
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border-radius 属性 与 margin、padding 属性 相似 ， 可 通过 一 个 值 设置 四 个 方法 ， 也 文 
持 两 个 值 和 四 个 值 的 写法 。 顺 序 从 左上 角 按 顺 时 针 开始 设置 。 接 下 来 通过 案例 来 演示 ， 
具体 如 例 12-18 所 示 。 

【 例 12-18】 为 元 素 添加 圆 角 效果 。 





下 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title>CSS3 边框 属性 </title> 

6 <style> 

by div{ width:150px; height:150px; 
8 background:red; border-radius:10px 20px 30px 40px; } 
9 </style> 

10 </head> 

11 <body> 

12 <xdiv></div> 

13 </body> 

14 </html> 


运行 结果 如 图 12.23 所 示 。 




















图 12.23 border-radius 多 值 设置 


12.6.2 ”border-image 属性 


在 前 面 章节 中 学 习 过 边框 样式 border-style， 其 中 边框 只 有 实 线 、 虚 线 、 点 状 线 等 几 
种 简单 的 形式 。 如 果 想 要 给 边框 添加 漂亮 的 背景 图 片 ， 就 要 用 到 CSS3 中 提供 的 
border-image 属性 。 
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在 CSS3 中 borderimage 属性 为 边框 添加 背景 图 片 ， 主 要 可 以 设置 图 片 路 径 、 切 割 
图 片 的 宽度 、 图 片 平 铺 方式 这 三 个 值 。 本 小 节 将 用 图 12.24 填充 边框 。 








12.24 ”border-image 用 到 的 填充 图 片 


通过 url 值 来 添加 图 片 地 址 。 通 过 数值 来 设置 填充 图 片 的 大 小 ， 数 值 填充 的 是 边框 
的 四 个 方向 ， 从 图 片 边缘 向 图 片 内 层 截取 相应 数值 进行 填充 。 注 意 数值 不 加 单位 。 接 下 
来 通过 案例 来 演示 ， 有 具体 如 例 12-19 所 示 。 

【 例 12-19】 设置 图 片 路 径 、 切 割 图 片 的 宽度 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 颜色 属性 </title> 
<style> 
div{ width:150px; height:150px; border:30px black solid; 
border-image:url (borderImage.png) 30; } 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


Com Dp 
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运行 结果 如 图 12.25 所 示 。 

图 12.25 可 以 看 出 ， 默 认 边 框 中 间 部 分 被 拉 伸 ， 可 通过 图 片 平 铺 来 改变 边框 添加 
的 方式 ，repeat 值 表示 重复 ，round 值 表示 平 铺 ; stretch 值 表示 拉 伸 〈 默 认 值 )。 接 下 来 
通过 案例 来 演示 ， 具 体 如 例 12-20 所 示 。 





























© | © rile:///D:/HTML eranple/chapter12/12-19;htaml 会 | 
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12.25 ”border-image 设置 样式 
【 例 12-20】 设置 图 片 平 铺 方式 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 边框 属性 </title> 
<style> 
div{ width:150px; height:150px; border:30px black solid; 
border-image:url (borderImage.png) 30 round; } 
</style> 
</head> 
<body> 
<div></div> 
13 </body> 
14 </html> 


Oo Dpp 


[ 
已 


运行 结果 如 图 12.26 所 示 。 

















:/V/D:/HIMLexample/chapterl2112-20.htal 会 | 


12.26 ”border-image 设置 round 方式 
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12.6.3 ”box-shadow 属性 


box-shadow 属性 与 前 面 小 节 的 text-shadow 类 似 ， 是 给 一 个 容器 添加 阴影 的 样式 属 
性 。 可 选择 设置 x-shadow、y-shadow、blur、spread、color、inset 等 值 。x-shadow、y-shadow 


值 为 阴影 


的 偏 移 量 ，blur 值 为 模糊 值 ，color 值 为 阴影 的 颜色 。 接 下 来 通过 案例 来 演示 ， 


具体 如 例 12-21 所 示 。 
【 例 12-21】 box-shadow 属性 的 使 用 。 


OOoODNDp 


上 
-oo 


FF 
心 w 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 边框 属性 </title> 
<style> 
div{ width:150px; height:150px; border:5px black solid; 
box-shadow:10px 10px 5px red; } 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 12.27 所 示 。 


四 css3 边 框 属性 x ,RD 











[ oO file:///D:/HIMLexample/chapter12/12-21. html 女 | : 








12.27 ”box-shadow 设置 阴影 


spread 值 为 阴影 的 范围 ， 可 以 对 设置 好 的 阴影 进行 局 部 放大 。 接 下 来 通过 案例 来 演 
示 ， 具 体 如 例 12-22 所 示 。 
【 例 12-22】 设置 阴影 范围 。 


<!doctype html> 


<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 边框 属性 </title> 
<style> 
div{ width:150px; height:150px; border:5px black solid; 
box-shadow:10px 10px Spx 1l0px red; } 
</style> 
</head> 
<body> 
<div></div> 
</body> 
14 </html> 


运行 结果 如 图 12.28 所 示 。 


WH Hn WS 


FF 
WOOO 


口 css3 边 框 属性 x 《二 


[人 |O file:///D:/HIMLexample/chapter12/12-22. html 六 | : 











图 12.28 ”box-shadow 设置 阴影 范围 


inset 值 可 用 于 设置 内 阴影 。 接 下 来 通过 案例 来 演示 ， 上 基体 如 例 12-23 所 示 。 
【 例 12-23】 设置 内 阴影 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 边框 属性 </title> 
<style> 
div{ width:150px; height:150px; border:5px black solid; 
box-shadow:10px 10px 5px 10px red inset; } 
</style> 
</head> 
<body> 
<div></div> 


Oo DNDPp 


pp 
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13 </body> 
14 </html> 


运行 结果 如 图 12.29 所 示 。 
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CC [ee file:///D:/HIMLexample/chapter12/12-25. html 妆 | : 

















12.29 ”box-shadow 设置 内 阴影 


12.7 本 章 小 结 


通过 本 章 的 学 习 ， 了 解 CSS3 基本 概念 、CSS3 特性 、 浏 览 器 前 级 等 ， 掌 握 CSS3 中 
提供 的 新 样式 ， 如 选择 器 、 背 景 、 边 框 、 文 本 等 。 增 强 网 页 的 美观 性 ， 提 高 用 户 体验 。 


12.8 己 是 

1. 填空 题 

(1) 在 CSS3 中 样式 可 设置 圆 角 边框 样式 。 

(2) CSS3 提供 $ 三 种 模糊 匹配 的 属性 
选择 器 。 

(3) 选择 器 可 以 改变 被 选择 的 网 页 文本 的 显示 效果 。 

(4) border-image 属性 可 以 设置 、 切 割 图片 的 宽度 和 _ 三 
个 值 。 

(5) box-shadow 属性 中 设置 x-shadow、y-shadow 值 为 

2. 选择 题 


(1) ulli:nth-child(3) 选 择 的 是 第 ( 天 人 本 
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.| ps 
人 ,学 D. 4 
(2) 将 背景 图 像 扩 展 至 足够 大 ， 以 使 背景 图 像 完 全 履 盖 背景 区 域 的 方法 是 关 
A. cover B. 100% auto 
C. 100% 100% D. contain 


(3) 以 下 关于 div+p 说 法 正确 的 是 ( % 
A. 选择 div 里 面 的 所 有 子 元 素 <p> 标 签 
B. 选择 紧 位 于 div 同 级 元 素 下 的 最 近 的 <p> 标 签 
C. 选择 div 的 同 级 元 素 的 所 有 的 <p> 标 签 
D. 选择 div 的 父 级 元 素 <p> 标 签 
(4) 以 下 选择 器 不 属于 *-child 类 的 是 ( 站 


A. E:， first-child 选择 器 B. E: nth-child 选择 器 
C. E: last-child 选择 器 D. E: only-child 选择 器 
(5) 下 面 不 是 background-size 属性 取 值 的 是 〈 Da 
A. cover B. number 
C. 100% D. contain 
3， 思 考题 


(1) 请 简 述 background-origin 与 background-clip 的 区 别 。 
(2) 请 简 述 nth-child 与 nth-of-type 的 区 别 。 





CSS3 动画 与 3D 


本 章 学 习 目标 

。 掌握 CSS3 运动 相关 样式 过 渡 与 变形 ; 

。 掌握 CSS3 高 级 特性 动画 与 3D。 

CSS3 可 用 于 创建 动画 , 它 可 以 取代 许多 网 页 的 动画 图 像 , 如 Flash 动画 、JavaScript。 


13.1 CSS3 过 渡 


在 CSS3 中 ， 可 以 利用 transition 属性 使 元 素 的 某 一 个 属性 在 指定 的 时 间 内 从 “一 个 
属性 值 ” 平 滑 过 渡 到 “另外 一 个 属性 值 ” 从 而 实现 动画 效果 。 


13.1.1 transition 属性 


首先 看 一 个 实例 ， 当 鼠标 移入 方块 时 ， 触 发 hover 伪 类 ， 实 现 样 式 的 变化 。 具 体 如 
例 13-1 所 示 。 
【 例 13-1】 鼠标 移入 方块 时 ， 触 发 hover 伪 类 ， 实 现 样式 变化 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 过 渡 </title> 

<style> 
#box{ width:100px; height:100px; background:red; } 
#box:hover{ width:150px; height:150px; background:blue; } 

</style> 

</head> 

<body> 

<div id="box"></div> 

</body> 

</html> 


[> 
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样式 变化 如 图 13.1 所 示 。 





ee. 图 





Hover 后 效 休 


图 13.1 hover 效果 立即 改变 


可 以 看 到 ,触发 hover 时 从 红色 方块 立即 变化 到 蓝 色 方 块 ， 效 果 非 常生 硬 。CSS3 中 
提供 transition 属性 把 红色 方块 平滑 地 过 渡 到 蓝 色 方块 ， 让 用 户 拥有 好 的 视觉 体验 。 
transition 属性 是 一 个 复合 属性 ， 主 要 包含 四 个 子 属性 ， 下 面 将 依次 进行 介绍 。 


1. 


transition-duration 属性 


transition-duration 属性 表示 过 渡 的 持续 时 间 , 单位 可 以 设置 成 s ( 秒 ) 或 ms (毫秒 )。 
接 下 来 通过 案例 来 演示 ， 具 体 如 例 13-2 所 示 。 
【 例 13-2】 transition-duration 属性 的 使 用 。 


Dowamnuwmwwmn 


FF FF 
心 wN Ph 


15 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 过 渡 </title> 
<style> 
#box{ width:100px; height:100px; background:red; 
transition:1s; } 
#box:hover{ width:150px; height:150px; background:blue; } 
</style> 
</head> 
<body> 
<div id="box"></div> 
</body> 
</html> 


样式 过 渡 效 果 如 图 13.2 所 示 。 
例 13-2 中 触发 hover 时 会 有 一 秒 钟 的 时 间 用 来 过 渡 ， 整 个 展示 效果 变 得 非常 柔和 。 





2. transition-property 属性 


transition-property 属性 表示 对 元 素 的 哪 一 个 属性 进行 过 渡 操 作 。 在 默认 情况 下 ， 所 
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有 的 值 会 同时 变化 ， 如 前 面 的 hover 效果 ， 可 以 看 到 宽 、 高 、 
接 下 来 通过 案例 来 演示 ， 有 具体 如 例 13-3 所 示 。 








Nover 站 将 果 





过 繁 路 效果 


县 


hover 后 效 生 


13.2 transition 过 渡 效 果 


【 例 13-3】 transition-property 属性 的 使 用 。 


和 <!doctype html> 

和 <html> 

2 <head> 

4 <meta charset="utf-8"> 

5 <title>CSsS3 过 渡 </title> 

6 <style> 

呈 #box{ width:100px; height:100px; background:red; 
8 transition:1s width; } 

9 #box:hover{ width:150px; height:150px; background:blue; } 
10 </style> 

11 </head> 

12 <body> 

13 <div id="box"></div> 

14 </body> 

15 </html> 


样式 过 渡 效 果 如 图 13.3 所 示 。 





hover 前 效 华 





内 有 章 实 现 了 过 流 hover 后 效 失 
图 13.3 ”指定 属性 进行 过 渡 
可 以 看 到 ， 只 有 宽度 产生 过 渡 效 果 ， 而 高 度 和 背景 色 立 即 发 生变 化 。 
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3. transition-delay 属性 


transition-delay 属性 表示 执行 过 渡 效 果 的 延迟 时 间 。 单 位 同样 是 s 〈 秒 ) 或 ms【〈 毫 
秒 )。 当 在 复合 样式 transition 中 设置 两 个 时 间 时 ， 前 面 的 时 间 表 示 过 渡 时 间 ， 后 面 的 时 
间 表 示 延 迟 时 间 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 13-4 所 示 。 

【 例 13-4】 transition-delay 属性 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 过 渡 </title> 
<style> 
#box{ width:100px; height:100px; background:red; 
transition:1s 2s; } 
#box:hover{ width:150px; height:150px; background:blue; } 
10 </style> 
11 </head> 
12 <body> 
13 <div id="box"></div> 
14 </body> 
15 </html> 


样式 过 渡 效 果 如 图 13.4 所 示 。 


ownanawm 必 swnN 





和 


hover 前 效果 等 待 2 秒 后 严 生 过 波 





hover 打 多 中 


图 13.4 延迟 执行 过 渡 效 果 


运行 程序 时 可 以 看 到 ， 当 鼠标 移入 红色 方块 时 ， 会 等 待 2s 再 进行 过 渡 效 果 。 
transition-delay 属性 还 可 以 设置 成 负数 ， 当 设置 为 负数 时 表示 提前 执行 过 渡 效 果 ， 这 种 
负数 的 设置 在 开发 中 非常 有 用 。 接 下 来 通过 案例 来 演示 提前 执行 过 渡 效果 , 具体 如 例 13-5 
所 示 。 

【 例 13-5】 提前 执行 过 渡 效果 。 

1 <!idoctype html> 

2 <html> 
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3 <head> 

4 <meta charset="utf-8"> 

5 <title>CSS3 过 渡 </title> 

6 <style> 

5 #box{ width:100px; height:100px; background:red; 

8 transition:3s -2s; } 

9 #box:hover{ width:150px; height:150px; background:blue; } 


10 </style> 


bover 后 效果 


11 </head> 

12 <body> 

13 <div id="box"></div> 
14 </body> 

15 </html> 


样式 过 渡 效 果 如 图 13.5 所 示 。 


国 一 


boever 前 效果 提前 2 秒 进行 过 渡 





图 13.5 ”提前 执行 过 渡 效 果 
运行 程序 可 以 看 到 ， 当 鼠标 移入 红色 方块 的 一 瞬间 ， 过 渡 时 间 已 经 执行 了 2s， 而 过 
渡 只 剩 下 1s 的 动画 效果 。 
4 transition-timing-function 属性 


transition-timing-function 属性 表示 过 渡 的 形式 , 主要 有 linear、ease( 默 认 值 )、ease-in、 
ease-out、ease-in-out 四 个 值 。 其 表示 过 渡 形 式 如 图 13.6 所 示 。 


ya 


linear ease ease-in ease-Out ease-in-out 
匀速 逐渐 慢 下 来 加 速 减速 先 加 速 








13.6 ”过 渡 的 五 种 形式 


13.1.2 ”cubic-bezier 值 


除了 简单 的 过 渡 形 式 外 ，transition 属性 还 提供 了 cubic-bezier 值 〈 贝 塞 尔 曲线 )。 贝 
塞 尔 曲线 是 应 用 于 二 维 图 形 应 用 程序 的 数学 曲线 , 可 以 通过 http://cubic-beziercom ( 贝 塞 











尔 官网 ， 如 图 13.7 所 示 ) 来 获取 想 要 设置 的 样式 。 


第 


章 ”CSS3 动画 与 3D 


cubic-bezier(.17,.67, .83, .67) 已 忆 


Preview & compare 


Duration 全 





eto compare it with the current one. 


< — 国 Z2 


Tip: ht chick on any Nbrany Curve and select “Copy Link Address” io geta permabink to It whch you can share with others 


13.7 贝 塞 尔 官网 


接 下 来 通过 案例 来 演示 贝 塞 尔 曲线 过 渡 ， 有 具体 如 例 13-6 所 示 。 


【 例 13-6】 贝 塞 尔 曲线 过 渡 。 


1 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 <title>CSS3 过 渡 </title> 

6 <style> 

WL #box{ width:100px; height:100px; background:red; 

8 transition:1s cubic-bezier(1,-0.82,0.83,1.83);} 
9 #box:hover{ width:150px; height:150px; background:blue; } 
10 </style> 

11 </head> 

12 <body> 

13 <div id="box"></div> 

14 </body> 


15 </html> 


样式 过 渡 效 果 如 图 13.8 所 示 。 
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hover 前 效果 页 去 尔 曲线 运动 





hover 后 效果 


图 13.8 贝 塞 尔 曲线 过 渡 


13.2 CSS3 变形 


CSS3 为 元 素 提 供 了 变形 的 属性 , 利用 这 些 属性 可 以 制作 多 种 效果 的 网 页 , 提高 用 户 
体验 。 


13.2.1 ”transform 属性 


在 CSS3 中 ， 可 以 使 用 transform 属性 来 实现 文字 或 图 像 的 各 种 变形 效果 ， 如 位 移 、 
缩放 、 旋 转 、 斜 切 等 。 


1.， translate() 方 法 


translate() 方 法 表示 元 素 位 移 的 操作 方法 。 在 CSS3 中 ， 可 以 使 用 translate() 方 法 将 元 
素 沿 着 水 平方 向 (X 轴 ) 和 垂直 方向 (Y 轴 ) 移动 。translate 方法 与 relative (相对 定位 ) 
相似 ， 元 素 位 置 的 改变 不 会 影响 到 其 他 元 素 。 对 于 位 移 translate0 方 法 可 分 为 三 种 情况 。 
具体 如 表 13.1 所 示 。 
表 13.1 translate( 方 法 的 三 种 情况 


translate() 方 法 
translateX(x) 元 素 仅 在 水 平方 向 移动 (X 轴 移 动 )，0 点 坐标 相对 于 自身 位 置 





translateY(y) 元 素 仅 在 垂直 方向 移动 (Y 轴 移 动 )，0 点 坐标 相对 于 自身 位 置 
translate(x.y) 元 素 在 水 平方 向 和 垂直 方向 同时 移动 (X 轴 和 YY 轴 同 时 移动 ) 





表 13.1 中 列 出 了 translate0 方 法 的 三 种 情况 , 接 下 来 通过 案例 来 演示 translate0 方 法 ， 
具体 如 例 13-7 所 示 。 

【 例 13-7】 translate0 方 法 。 

<!doctype html> 


2 <html> 
3 <head> 
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4 <meta charset="utf-8"> 

5 <title>CSS3 变形 </title> 

6 <style> 

人 #main{ width:150px; height:150px; border:lpx black solid; } 
8 #boxl{ width:80px; height:80px; background:red; 
9 transform:translateXx (40px); } 

10 #box2{ width:80px; height:80px; background:red; 
TH transform:translateY (40px); } 

b #box3{ width:80px; height:80px; background:red; 
1 transform:translate (40px, 40px); } 

14 </style> 

15 </head> 

16 <body> 

17 <div id="main"> 

18 <div id="box1"></div> 

19 </div> 

20 <dqiv id="main"> 

eal <div id="box2"></div> 

22 </div> 

23 <div id="main"> 

24 <div id="box3"></div> 

25 </div> 

26 </body> 

27 </html> 


运行 结果 如 图 13.9 所 示 。 


口 css 溢 形 x \ | 


© | © sile:///D:/HTMLexample/chapter13/13-7.htal 从 
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2.scale( 方 法 


scale() 方 法 表示 元 素 缩放 的 操作 方法 。 缩 放 指 的 是 缩小 和 放大 。 在 CSS3 中 ,可 以 使 
用 scale0 方 法 来 将 元 素 根据 中 心 原点 进行 缩放 。 与 translate( 方 法 一 样 ， 缩 放 scale() 方 法 
也 有 三 种 情况 ， 如 表 13.2 所 示 。 值 为 相对 比例 值 ， 如 果 大 于 1 就 代表 放大 ， 如 果 小 于 1 
就 代表 缩小 。 
表 13.2 scale0 方 法 分 类 
Scale() 方 法 描 述 
scaleX(w) | 元 素 仅 水 平方 向 缩放 (X 轴 缩 放 )，w 值 为 宽度 缩放 的 比例 值 ， 默 认 大 小 比例 值 为 1 
scaleY(h) | 元 素 仅 垂直 方向 缩放 (站 轴 缩 放 ),， 刀 值 为 高 度 缩放 的 比例 值 ， 默 认 大 小 比例 值 为 1 











scale(w,)) 元 素 水 平方 向 和 垂直 方向 同时 缩放 (X 轴 和 YY 轴 同 时 缩放 ) 





表 13.2 中 列 出 了 scale0 方 法 的 三 种 情况 ， 接 下 来 通过 案例 来 演示 scale0 方 法 ， 具 体 
如 例 13-8 所 示 。 
【 例 13-8】 scale0 方 法 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 变形 </title> 
<style> 
#main{ width:150px; height:150px; border:lpx black solid; } 
#boxl{ width:80px; height:80px; background:red; 
transform:scaleX(2); } 
#box2{ width:80px; height:80px; background:red; 
transform:scaleY (2); } 
#box3{ width:80px; height:80px; background:red; 
transform:scale(0.5,0.5); } 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="box1"></div> 
</div> 
<div id="main"> 
<div id="box2"></div> 
</div> 
<div id="main"> 
<div id="box3"></div> 
</div> 
</body> 
</html> 
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运行 结果 如 图 13.10 所 示 。 





口 Css 变形 x BR. 


€ © | O sile: //D:/HTMLexample/chapter13/13-8.html 安 | : 




















13.10 scale 0 缩放 操作 
3. rotate() 方 法 
在 CSS3 中 ， 可 以 使 用 rotate() 方 法 来 将 元 素 相 对 中 心 原 点 进行 旋转 。rotate() 方 法 的 
参数 单位 是 deg (角度 )。 当 设置 正 值 时 表示 顺 时 针 旋 转 ， 当 设置 负 值 时 表示 逆 时 针 旋 转 。 


接 下 来 通过 案例 来 演示 rotate() 方 法 的 使 用 ， 如 例 13-9 所 示 。 
【 例 13-9】 rotate0 方 法 的 使 用 。 


1 <!doctype html> 

2 <html> 

2 <head> 

4 <meta charset="utf-8"> 

5 <title>CSS3 变形 </title> 

6 <style> 

1 #main{ width:150px; height:150px; border:1lpx black solid; } 
8 #box{ width:80px; height:80px; background:red; 
9 transform:rotate(45deg); } 

10 </style> 

11 </head> 

12 <body> 
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13 <xdiv id="main"> 

14 <div id="box"></div> 
15 </div> 

16 </body> 

17 </html> 


运行 结果 如 图 13.11 所 示 。 





口 css3 变 形 x OV 


€ Cc IO file:///D:/HIMLexample/chapter13/13-9.html 人 

















13.11 rotate0 旋 转 操作 


4. skew( 方 法 


在 CSS3 中 可 以 使 用 skew0 方 法 将 元 素 斜 切 显示 。skew0 方 法 与 translate0) 方 法 、scale() 
方法 一 样 也 分 为 三 种 情况 ， 如 表 13.3 所 示 。skew0 方 法 的 参数 单位 与 rotate0 方 法 一 样 ， 
需要 设置 倾斜 的 角度 。 当 设置 正 值 时 表示 顺 时 针 斜 切 ， 当 设置 负 值 时 表示 逆 时 针 斜 切 。 


表 13.3 skew() 方 法 分 类 










skew() 方 法 
skewX(x) 
skewY(y) 
Skew(x,y) 







使 元 素 在 水 平方 向 倾斜 (X 轴 倾 斜 》 
使 元 素 在 垂直 方向 倾斜 (Y 轴 倾 斜 ) 
使 元 素 在 水 平方 向 和 垂直 方向 同时 倾斜 (X 轴 和 并 轴 同 时 倾斜 ) 





表 13.3 中 列 出 了 skew0 方 法 的 三 种 情况 , 接 下 来 通过 案例 来 演示 skew0 方 法 的 使 用 ， 
具体 如 例 13-10 所 示 。 
【 例 13-10】 skew0 方 法 的 使 用 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 变形 </title> 

<style> 
#main{ width:150px; height:150px; border:lpx black solid; } 
#boxl{ width:80px; height:80px; background:red; 

transform:skewX (30deg); } 


OCOD pp 
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10 #box2{ width:80px; height:80px; background:red; 
1 transform: skewY (30deg); } 
2 #box3{ width:80px; height:80px; background:red; 
3 transform: skew (30deg, 30deg); } 
14 </style> 
15 </head> 
16 <body> 
17 <div id="main"> 
18 <div id="box1"></div> 
19 </div> 
20 <div id="main"> 
<div id="box2"></div> 
22 </div> 
23 <div id="main"> 
24 <div id="box3"></div> 
25 </div> 
26 </body> 
7htnl 


el 
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图 13.12 
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变形 的 方法 可 以 组 合 使 用 ， 但 要 注意 顺序 ， 即 由 后 向 前 执行 。translate0 位 移 方法 与 
其 他 方法 会 被 前 面 的 方法 影响 。 接 下 来 通过 案例 来 演示 ， 有 具体 如 例 13-11 所 示 。 
【 例 13-11】 translateO) 位 移 方法 与 其 他 方法 会 被 前 面 的 方法 影响 。 


工 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>CSS3 变形 </title> 
6 <style> 

经 #boxl{ width:80px; height:80px; background:red; } 
8 #box2{ width:80px; height:80px; background:red; 
9 transform:translateX(100px) scale(0.5,0.5); } 





10 #box3{ width:80px; height:80px; background:red; 
下 transform:scale(0.5,0.5) translateX(100px); } 
12 </style> 
13 </head> 
4 <body> 
5 <div id="box1"></div> 
6 <div id="box2"></div> 
7 <div id="box3"></div> 
18 </body> 
9 </html> 


运行 结果 如 图 13.13 所 示 。 


口 css3 变 形 





€ © | © file:///D:/HIMLexample/chapter13/13-11.html 从 | : 








13.13 组合 方法 的 执行 顺序 
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13.2.2 transform-origin 属性 


CSS3 中 位 移 、 缩放 、 旋转、 倾斜 默认 都 是 以 元 素 的 中 心 原点 进行 变形 。 在 CSS3 中 ， 
可 以 通过 transform-origin 属性 改变 元 素 变形 时 中 心 原点 位 置 。 其 属性 值 可 以 采用 长 度 值 
和 关键 字 两 种 取 值 方式 。 长 度 值 一 般 使 用 百分比 作为 单位 使 用 transform-origin 属性 时 ， 
水 平方 向 和 垂直 方向 都 需要 设置 其 对 应 的 值 。transform-origin 属性 取 值 与 背景 位 置 
background-position 属性 取 值 相似 。transform-origin 属性 取 值 及 中 心 原点 位 置 如 表 13.4 
所 示 。 














表 13.4 transform-origin 属性 取 值 及 中 心 原 点 位 置 








关 键 字 中 心 原点 位 置 
top left | 0 0 

top center 

top right 

left center 

ei 

right center 

bottom left 

bottom center 

bottom right 100% 100% 





接 下 来 通过 案例 来 演示 以 左上 角 位 置 为 原点 进行 斜 切 设置 ， 具体 如 例 13-12 所 示 。 
【 例 13-12】 以 左上 角 位 置 为 原点 进行 斜 切 设置 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 变形 </title> 

<style> 
#main{ width:200px; height:200px; border:lpx black solid; } 
#box{ width:100px; height:100px; background:red; 

transform: skew (30deg, 30deg); 
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transform-origin:left top; } 
</style> 
</head> 
<body> 
14 <div id="main"> 
315 <div id="box"></div> 
16 </div> 
17 </body> 
18 </html> 
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运行 结果 如 图 13.14 所 示 。 
























































13.14 transform-origin 原点 设置 


13.3 CSS3 动画 


在 前 面 的 两 个 小 节 中 ， 已 经 对 CSS3 过 渡 和 CSS3 变形 进行 了 详细 的 讲解 。 本 小 节 
将 讲解 CSS3 中 “真正 ”的 动画 效果 。 


13.3.1 animation 属性 


在 CSS3 中 ， 用 animation 属性 实现 动画 效果 。animation 属性 和 transition 属性 功能 
相同 都 是 通过 改变 元 素 的 “属性 值 ” 来 实现 动画 效果 , 但 这 两 者 又 有 很 大 的 区 别 transition 
属性 只 能 通过 指定 属性 的 开始 值 与 结束 值 ， 再 在 这 两 个 属性 值 之 间 进行 平滑 过 渡 来 实现 
动画 效果 ， 因 此 只 能 实现 简单 的 动画 效果 。animation 属性 则 通过 定义 多 个 关键 帧 以 及 定 
义 每 个 关键 帧 中 元 素 的 属性 值 来 实现 复杂 的 动画 效果 。 

animation 属性 是 一 个 复合 属性 ， 主 要 包含 animation-duration 、animation-name、 
animation-delay、animation-iteration-count 和 animation-timing-function, animation-direction 
六 个 子 属 性 ,下 面 先 介绍 前 五 个 子 属性 来 了 解 animation 动画 , 在 后 面 小 结 中 会 对 第 六 个 
属性 进行 详细 介绍 。 


1. animation-duration 属性 
animation-duration 属性 表示 动画 的 持续 时 间 , 单位 可 以 设置 成 s( 秒 ) 或 ms (毫秒 )。 


2. animation-name 属性 





animation-name 属性 表示 动画 的 名 称 ， 可 以 通过 @keyframes 关键 帧 样式 来 找到 对 应 
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的 动画 名 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 13-13 所 示 。 
【 例 13-13】 动画 名 称 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 动画 </title> 
<style> 
#main{ width:150px; height:150px; border:lpx black solid; } 
#box{ width:50px; height:50px; background:red; 
animation:1s move; } 
Qkeyframes move{ 
0%{ transform:translate(0,0); } 
100%{ transform:translate(100px,0); } 
J 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="box"></div> 
</div> 
</body> 
</html> 


动画 效果 如 图 13.15 所 示 。 





三 
+ 一 








图 13.15 ”animation 动画 效果 


可 以 看 到 ， 元 素 从 宽度 0 位 置 位 移 到 100 的 位 置 ，0% 表 示 动 画 的 开始 样式 ，100% 
表示 动画 的 结束 样式 。0% 和 100% 是 必须 设置 的 ， 但 在 一 个 @keyframes 关键 帧 中 可 以 设 
置 多 个 不 同 数值 , 每 一 个 数值 都 可 以 定义 自身 的 CSS 样式 , 从 而 形成 一 系列 的 动画 效果 。 
接 下 来 通过 案例 演示 ， 具 体 如 例 13-14 所 示 。 

【 例 13-14】 动画 效果 。 
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<html> 
<head> 


<meta charset="utf-8"> 


<title>CSS3 动画 </title> 


<style> 


#main{ width:150px; height:150px; border:1lpx black solid; 
#box{ width:50px; height:50px; background:red; 


animation:1s move; } 


Qkeyframes move{ 


0%{ transform:translate (0,0); 


} 


25%{ transform:translate (100px, 0); 
50%{ transform:translate (100px, 100px); } 
75%{ transform:translate (0,100px); 
100%{ transform:translate(0,0); } 


} 
</style> 
</head> 
<body> 


<div id="main"> 


<div id="box"></div> 


</div> 
</body> 
</html> 


动画 效果 如 图 13.16 所 示 。 





} 


上 
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图 13.16 


@keyframes 关键 帧 设置 
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通过 animation-name 属性 可 以 找到 指定 的 @keyframes 关键 帧 对 应 的 样式 。 


3. animation-delay 属性 


animation-delay 属性 表示 执行 动画 效果 的 延迟 时 间 ， 单 位 是 s 〈 秒 ) 或 ms (毫秒 )。 
在 复合 样式 animation 中 设置 两 个 时 间 时 , 前 面 的 时 间 表示 动画 时 间 , 后 面 的 时 间 表 示 延 


迟 时 间 。 


animation-delay 属性 与 transition-delay 属性 效果 类 似 。 


4. animation-iteration-count 属性 


animation-iteration-count 属性 表示 动画 的 执行 次 数 , 默认 整个 动画 执行 一 次 , 可 以 设 
置 一 个 infinite 值 ， 表 示 执 行 无 限 次 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 13-15 所 示 。 
【 例 13-15】 动画 执行 次 数 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 动画 </title> 
<style> 
#main{ width:150px; height:150px; border:lpx black solid; } 
#box{ width:50px; height:50px; background:red; 
animation:1s move 3; } 
@keyframes movel{ 
0%{ transform:translate(0,0); } 
100%{ transform:translate(100px,0); } 
上. 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="box"></div> 
</div> 
</body> 
</html> 


动画 效果 如 图 13.17 所 示 。 


> 


动 别 会 执行 3 次 





13.17 animation 执行 次 数 
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5. animation-timing-function 属性 


animation-timing-function 属性 表示 动画 的 形式 , 与 transtion-timing-function 的 过 渡 形 
式 完 全 一 样 ， 默 认 情况 下 是 ease 形式 。 


13.3.2 animation-fil-mode 属性 


animation-fill-mode 属性 可 控制 动画 停止 的 位 置 。 在 前 面 的 示例 中 ， 当 元 素 运动 结束 
后 会 返回 到 起 始 位 置 。 通 过 animation-fill-mode 属性 可 以 让 元 素 运动 结束 后 ， 停 止 在 结 
束 位 置 。 其 属性 值 有 forwards 和 backwards 两 个 常见 值 。forwards 值 表示 动画 结束 之 后 
继续 应 用 最 后 的 关键 帧 位 置 ，backwards 值 表示 会 在 元 素 应 用 动画 样式 时 迅速 应 用 动画 
的 初始 帧 。 接 下 来 通过 案例 来 演示 animation-fill-mode 属性 ， 具 体 如 例 13-16 所 示 。 

【 例 13-16】 animation-fill-mode 属性 的 使 用 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 动画 </title> 

<style> 
#main{ width:150px; height:150px; border:1lpx black solid; } 
#box{ width:50px; height:50px; background:red; 


[i 


animation:1s move; animation-fill-mode:forwards; } 
@keyframes move{ 
0%{ transform:translate(0,0); } 
100%{ transform:translate(100px,0); } 
下 
</style> 
</head> 
<body> 


<div id="main"> 





co aum 必 wh 


<div id="box"></div> 
19 </div> 
20 </body> 
21 </html> 


运行 结果 如 图 13.18 所 示 。 
13.3.3 animation-direction 属性 


在 CSS3 中 ， 可 以 使 用 animation-direction 属性 定义 动画 的 播放 方向 ， 其 属性 值 有 
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normal、reverse、alternate 三 个 常见 值 。normal 值 为 默认 值 ， 表 示 每 次 循环 都 向 正方 向 播 
放 ， 而 reverse 值 则 正好 相反 ， 每 次 循环 都 向 反方 向 播放 。altemate 值 表示 播放 次 数 为 奇 
数 时 ， 动 画 向 原 方向 播放 ;播放 次 数 是 偶数 时 ， 动 画 向 反方 向 播放 。 接 下 来 通过 案例 来 
演示 animation-direction 属性 ， 具 体 如 例 13-17 所 示 。 





口 css3 动 画 > WE 


€ CG |O file:///D:/HIMLexample/chapter13/13-16. html 六 | : 

















13.18 ”animation-fill-mode 设置 


【 例 13-17】 animation-direction 属性 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 动画 </title> 
<style> 
#boxl{ width:50px; height:50px; background:red; 
animation:2s move 3; animation-direction:reverse;} 
#box2{ width:50px; height:50px; background:blue; 
animation:2s move 3; animation-direction:alternate; } 


[> 


[ 记 
-oo 


@keyframes move{ 

2 0%{ transform:translate(0,0); } 
13 100%{ transform:translate(100px,0); } 
14 1 

15 </style> 

16 </head> 

17 <body> 

18 <div id="boxl"></div><br> 

19 <xdiv id="box2"></div> 

20 </body> 

21 </html> 


行 结果 如 图 13.19 所 示 。 
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口 css3 动 画 x WE 


we (8) file:///D:/HIMLexample/chapter13/13-17. html 个 














国 奇数 次 


13.19 animation-direction 设置 





13.3.4 _ animation-play-state 属性 


在 CSS3 中 可 以 使 用 animation-play-state 属性 来 定义 动画 的 播放 状态 ， 其 属性 值 可 
以 设置 为 nning 和 paused 两 个 值 。running 值 表示 播放 动画 〈 默 认 值 )，paused 值 表示 
暂停 动画 。 一 般 情况 下 都 是 通过 JavaScript 方式 进行 播放 、 和 暂停 的 控制 。 接 下 来 通过 案 
例 来 演示 animation-play-state 属性 ， 具 体 如 例 13-18 所 示 。 

【 例 13-18】 animation-play-state 属性 的 使 用 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS3 动画 </title> 

<style> 

#box{ width:100px; height:100px; background:red; 
animation:1s move; animation-play-state:paused; } 


吕 oowamwm 必 wm PP 


@keyframes movef 
0%{ transform:translate(0,0); } 
100%{ transform:translate (100px,0); } 
上 
</style> 
</head> 
15 <body> 
16 <input id="btn" type="button" value=" 播 放 "> 
17 <xdiv id="box"></div><br> 
8 </body> 
Lo <ocript> 
20 var btn=document .getElementById('btn'); 


bs WO O 
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21 var box=document .getElementById('box'); 
22 var onoff=true; 
23 btn.onclick=function(){ 


24 if (getComputedSstyle (box) .animationPlayState=="paused')1{ 
2 box.style.animationPlayState='running'; 
26 this.value=' 暂 停 '; 

27 } 

28 elsef 

29 box.style.animationPlayState="paused' 7 
30 this.value=' 播 放 ' 7 

31 

Ee 

33. </script> 

34 </html> 


运行 结果 如 图 13.20 所 示 。 
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€ (3 19 人 le 人 17D:/HIMLexampJeychapteTr13/13-18.hrml 僵 


正本 


13.20 animation-play-state 设置 


13.4 CSS3 之 3D 


3D 即 三 维 空间 ， 是 指 在 平面 二 维系 中 又 加 入 了 一 个 方向 向 量 构成 的 空间 系 。3D 指 
的 是 坐标 轴 的 三 个 轴 ， 即 x 轴 、?7 轴 、z 轴 ， 其 中 x 表示 左右 空间 ，y 表示 上 下 空间 ，z 
表示 前 后 空间 ， 这 样 就 形成 了 视觉 立体 感 。 三 维 坐 标 系 如 图 13.21 所 示 。 








13.4.1_ transform3D 属性 


前 面 讲解 transform 变形 时 介绍 了 与 平面 相关 的 方法 ， 而 没有 介绍 3D 相关 的 方法 ， 
但 在 变形 操作 中 提供 了 transform3D 属性 ， 以 及 用 来 实现 3D 效果 的 相应 方法 。 下 面 将 详 
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细 介 绍 这 些 方法 。 





13.21 三 维 坐标 系 


1. rotateX() 方 法 


rotateX() 方 法 元 素 会 沿 着 x 轴 进 行 旋 转 ， 在 页 面 中 垂直 上 下 方向 进行 翻转 。 接 下 来 
通过 案例 来 演示 rotateX0 方 法 ， 具 体 如 例 13-19 所 示 。 
【 例 13-19】 rotateX() 方 法 的 使 用 。 


<!doctype html> 
2 <html> 
EE <head> 
4 <meta charset="utf-8"> 
5 <title>CSs3 之 3D</title> 
6 <style> 
#main{ width:150px; height:150px; border:lpx black solid; } 
8 #box{ width:50px; height:50px; background:red; 
9 color:white; margin:50px; transition:1s; } 
#main:hover #box{ transform:rotateXx(180deg);} 
</style> 
</head> 
<body> 


bs WN OO 


<div id="main"> 

15 <div id="box">CSS3</div> 
16 </div> 

</body> 

</html> 


运行 结果 如 图 13.22 所 示 。 
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图 13.22 沿 x 轴 垂直 翻转 


2. rotateY0 方 法 


rotateY0 方 法 元 素 会 沿 着 y 轴 进 行 旋转 ， 在 页 面 中 会 左右 方向 进行 翻转 。 接 下 来 通 
过 案例 来 演示 rotateY0 方 法 ， 具 体 如 例 13-20 所 示 。 
【 例 13-20】 rotateY0 方 法 的 使 用 。 


1 <!doctype html> 

芝 <html> 

2 <head> 

4 <meta charset="utf-8"> 
5 <title>CSS3 之 3D</title> 
6 <style> 

yi #main{ width:150px; height:150px; border:lpx black solid; } 
8 #box{ width:50px; height:50px; background:red; 

9 color:white; margin:50px; transition:ls; } 

10 #main:hover #box{ transform:rotateY (180deg);} 

11 </style> 

12 </head> 

13 <body> 

14 <div id="main"> 

15 <div id="box">CSS3</div> 

16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 13.23 所 示 。 
了 


rotateZ() 


rotateZ() 方 法 元 素 会 沿 着 z 轴 进 行 旋转 ， 与 rotate() 方 法 展示 的 旋转 效果 一 样 。 接 下 
来 通过 案例 来 演示 ， 具 体 如 例 13-21 所 示 。 
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口 css3 之 3 
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图 13.23 沿 y 轴 水 平 翻转 


【 例 13-21】 rotateZ0 方 法 的 使 用 。 


下 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 
5 <title>CSS3 之 3D</title> 
6 <style> 

7 #main{ width:150px; height:150px; border:lpx black solid; } 
8 #box{ width:50px; height:50px; background:red; 

9 color:white; margin:50px; transition:ls; } 

10 #main:hover #box{ transform:rotateZz (180deg);} 

11 </style> 

12 </head> 

13 <body> 

14 <div id="main"> 

15 <div id="box">CSS3</div> 

16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 13.24 所 示 。 
4. translateZ() 方 法 
translateZ() 方 法 元 素 会 沿 着 z 轴 进 行 位 移 。 当 值 为 正 数 时， 元素 会 垂直 于 屏幕 向 前 
移动 ， 元 素 显示 会 变 大 ; 当 值 为 负数 时 ， 元 素 会 垂直 于 屏幕 向 后 移动 ， 显 示 出 的 元 素 会 
变 小 。 需 要 配合 perspective 属性 使 用 , 在 下 面 小 节 中 将 对 perspective 属性 进行 详细 介绍 。 
接 下 来 通过 案例 来 演示 translateZ0 方 法 ， 具 体 如 例 13-22 所 示 。 


Ts 
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图 13.24 沿 = 轴 旋转 


【 例 13-22】 translateZ0 方 法 的 使 用 。 





运行 结果 如 图 13.25 所 示 。 
5，scaleZ0 方 法 


scaleZ() 方 法 会 沿 着 z 轴 进 行 缩放 。 只 有 在 3D 空间 中 的 元 素 才 具备 z 轴 的 缩放 处 理 
功能 。 
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图 13.25 Z 轴 设 置 位 移 值 


13.4.2 perspective 


目前 观察 的 页 面 还 处 于 二 维 空间 中 ， 并 没有 三 维 空间 的 概念 。 如 果 让 页 面具 备 三 维 
空间 ， 首 先 要 设置 perspective 属性 。 

perspective 属性 表示 景深 的 设置 。 景 深 是 指 在 摄影 机 镜头 或 其 他 成 像 器 前 沿 能 够 取 
得 清晰 图 像 的 成 像 所 测定 的 被 摄 物体 前 后 距离 范围 。 简 言 之 ， 就 是 用 户 观察 元 素 的 距离 
元 素 。 当 景深 的 值 越 小 ，3D 幅度 越 大 ， 即 离 观察 的 元 素 比 较 近 ， 当 景深 的 值 越 大 ，3D 
幅度 越 小 ， 即 离 观察 的 元 素 比较 远 。 接 下 来 通过 案例 来 演示 perspective 属性 ， 具 体 如 例 
13-23 所 示 。 

【 例 13-23】 perspective 属性 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 之 3D</title> 
<style> 
#main{ width:150px; height:150px; border:1lpx black solid; 
perspective:50px; } 


Oo 


#box{ width:50px; height:50px; background:red; 


卢 
oS 


color:white; margin:50px; transition:1ls; } 


I 
> 


#main:hover #box{ transform:rotateY (180deg);} 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="box">CSS3</div> 
</div> 


FF FF FF 
OoND 


18 </body> 
T9 </html> 


结果 如 图 13.26 所 示 。 


运行 


接 下 来 利用 transform3D 属性 配合 perspective 景深 属性 完成 - 
首先 需要 有 六 个 面 ， 全 部 设置 成 定位 的 元 素 ， 方 便 位 置 的 控制 ， 


背景 色 ， 


吕 oowmwaumiwmn 


上 
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13.26 ”perspective 属性 显示 3D 效果 


用 于 区 分 各 个 面 。 具 体 如 例 13-24 所 示 。 
【 例 13-24】 制作 立方 体 六 个 面 。 


<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title>CSS3 之 3D</title> 


<style> 


*{ margin:0; padding:0; } 


li{ list-style:none; } 


#main{ width:150px; height:150px; border:1lpx #100 solid; 
position:relative; margin:5px; perspective:500px; 
#main ul{ width:50px; height:50px; position:absolute; 


left:50px; top:50px; } 


#main ul li{ width:50px; height:50px; position:absolute; 


color:white; line-height:50px; text-align:center; 


#main 
#main 
#main 
#main 
#main 
#main 
</style> 


ul 
ul 
ul 
ul 
ul 
ul 


li:nth-of-type (1){ 
li:nth-of-type (2){ 
li:nth-of-type(3){ 
li:nth-of-type (4){ 
li:nth-of-type(5){ 
li:nth-of-type (6){ 


background:red; } 
background:blue; 


} 


background:yellow; 


background:black; 
background:pink; 


background:green; 


/chapter13/13-25,.htnl 个 | 





-个 立方 体 的 效果 制作 。 
设 定 统一 大 小 和 不 同 的 


} 
} 
} 
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22 </head> 


23 <body> 

24 <div id="main"> 
pa <ul> 

26 Li 
eal <1i>2</1i> 
28 <1i>3</1i> 
29 <1i>4</1i> 
30 XLS 
Sb <1i>6</1i> 
32 </ul> 

33 </div> 

34 </body> 

35 </html> 


运行 结果 如 图 13.27 所 示 。 
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13.27 立方体 基 本 结构 


第 一 个 红色 面 在 正 前 方 ， 第 二 个 蓝 色 面 的 左 侧 对 应 红色 面 的 右 侧 ， 然 后 通过 调整 
transform-origin 的 原点 设置 和 rotateY0 方 法 的 旋转 ， 把 蓝 色 面 沿 左 侧 折 对 进去 。 

第 三 个 黄色 面 的 右 侧 对 应 红色 面 的 左 侧 ， 同 样 调整 transform-origin 的 原点 设置 和 
rotateY(0 方 法 的 旋转 ， 使 黄色 面 折 车 进去 。 

上 下 两 个 面 与 左右 两 个 面具 有 类 似 的 实现 效果 ， 这 里 不 再 袭 述 。 只 剩 下 最 后 一 个 绿 
色 的 面 ， 在 立方 体 的 正 后 方 显示 。 通 过 rotateY0 方 法 的 旋转 和 translateZ0 方 法 的 位 移 来 
实现 。 

从 正面 观察 立方 体 ， 看 不 出 有 任何 立体 效果 。 可 以 给 立方 体 的 父 元 素 添 加 一 个 旋转 
操作 ， 来 观察 背面 的 效果 。 修 改 例 13-24 中 的 CSS 样式 ， 具 体 如 下 。 


下 <style> 
2 *{ margin:0; padding:0; } 
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3 li{ list-style:none; } 

4 #main{ width:150px; height:150px; border:1lpx #000 solid; 
3 position:relative; margin:5px; perspective:500px; } 
6 #main ul{ width:50px; height:50px; position:absolute; 

时 left:50px; top:50px; transition:1ls; } 

8 #main ul li{ width:50px; height:50px; position:absolute; 
9 color:white; line-height:50px; text-align:center; } 
10 #main ul li:nth-of-type(1){ background:red; } 

1 #main ul li:nth-of-type(2){ background:blue; left:50px; 
Be transform-origin:left; transform:rotateY (90deg); } 

13 #main ul li:nth-of-type(3){ background:yellow; left:-50px; 
14 transform-origin:right; transform:rotateY(-90deg); } 
15 #main ul li:nth-of-type(4){ background:black; top:-50px; 
16 transform-origin:bottom; transform:rotateX(90deg); } 
17 #main ul li:nth-of-type(5){ background:pink; top:50px; 
18 transform-origin:top; transform:rotateX(-90deg); } 

19 #main ul li:nth-of-type(6){ background:green; 

20 transform:rotateY (180deg) translateZz (50px); } 

2 #main:hover ul{ transform:rotateY (180deg); } 


22 </style> 


保存 文档 ， 刷 新 网 页 ， 运 行 结果 如 图 13.28 所 示 。 


css3 之 3D x 
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图 13.28 ”立方 体 添加 样式 


图 13.28 中 并 没有 出 现 立 体 的 效果 ， 其 原因 是 还 需要 设置 transform-style 属性 为 3D 
空间 ， 下 面 介绍 transform-style 属性 。 


13.4.3 transform-style 属性 


网 页 添加 景深 ， 但 是 对 于 多 个 组 合 的 元 素 ， 还 必须 添加 transform-style 属性 为 
preserve-3d 值 让 组 合 元 素 产生 空间 厚度 ， 才 可 以 显示 出 3D 的 效果 。 修 改 例 13-24 代码 ， 
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具体 如 下 。 
1 #main ul{ width:50px; height:50px; position:absolute; 
区 left:50px; top:50px; transition:1s7 transform-style:preserve-3d; } 


保存 文档 ， 刷 新 网 页 ， 运 行 结果 如 图 13.29 所 示 。 














13.29 transform-style 设置 3D 空间 


13.4.4 ”perspective-origin 属性 


perspective-origin 属性 用 来 显示 景深 的 观察 原点 ， 可 以 通过 改变 这 个 属性 值 ， 从 不 
同 的 视角 去 观察 3D 元 素 。 修 改 例 13-24 代码 ， 具 体 如 下 。 

1 #main{ width:150px; height:150px; border:1px #000 solid; 

之 position:relative; margin:5px; perspective:500px; 

2 perspective-origin:left; } 
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图 13.30 ”perspective-origin 原点 设置 
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也 可 以 再 从 右上 方 来 观察 3D 元 素 。 修 改 例 13-24 中 代码 ， 具 体 如 下 。 


1 #main{ width:150px; height:150px; border:1px #000 solid; 
区 position:relative; margin:5px; perspective:500px; 
3 Perspective-origin:top right; } 


保存 文档 ， 刷 新 网 页 ， 运 行 结果 如 图 13.31 所 示 。 


口 css3 之 3D 
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13.31 ” perspective-origin 原点 设置 





13.4.5 ”backface-visibility 属性 


backface-visibility 属性 用 来 设置 3D 元 素 背 面 隐藏 操作 。 如 上 面 制作 好 的 立方 体 , 把 
每 一 个 面 都 设置 成 半 透 明 ， 这 样 可 以 透 过 立方 体 显示 背面 。 修 改 例 13-24 中 代码 ， 具 体 
如 下 。 


1 #main ul li{ width:50px; height:50px; position:absolute; 
有 color:white; line-height:50px; text-align:center; opacity:0.5; } 


保存 文档 ， 刷 新 网 页 ， 运 行 结果 如 图 13.32 所 示 。 
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图 13.32 立方体 半 透明 设置 
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如 果 想 要 实现 半 透 明 效 果 ， 又 不 显示 背面 ， 则 可 以 设置 backface-visibility 属性 为 
hidden 值 。hidden 值 可 以 把 背面 的 元 素 进行 隐藏 处 理 。 修 改 例 13-24 代码 ， 有 具体 如 下 


所 示 。 


L 
这 
3 


#main ul li{ width:50px; height:50px; position:absolute; 
color:white; line-height:50px; text-align:center; 
opacity:0.5; backface-visibility:hidden; } 


保存 文档 ， 刷 新 网 页 ， 运 行 结果 如 图 13.33 所 示 。 





口 css3 之 3D x 二 
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13.33 ”backface-visibility 背面 隐藏 


接 下 来 利用 backface-visibility 属性 来 完成 一 个 实际 的 例子 。 有 两 个 层 合 加 在 一 起 ， 
当 鼠 标 移入 前 面 的 层 会 翻转 到 后 面 的 层 ， 利 用 背面 隐藏 特 性 可 以 很 好 地 隐藏 翻转 到 后 面 
的 层 。 具 体 代 码 如 例 13-25 所 示 。 

【 例 13-25】 隐藏 翻转 到 后 面 的 层 。 


OooDpp 


FRR FF 
mn 必 wP 口 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 之 3D</title> 
<style> 
#main{ width:150px; height:150px; 
border:1px #000 solid; position:relative; } 
#box{ width:50px; heigh :50px; position:absolute; 
left:50px; top:50px; perspective:50px; } 
#box div{ width:50px; height:50px; position:absolute; 
backface-visibility:hidden; transition:1s7 } 
#box div:nth-of-type(1){ background:red; 
transform:rotateY (0deg); } 
#box div:nth-of-type(2){ background:blue; 
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运 和 


通过 本 章 的 学 习 ， 掌握 CSS3 运动 相关 样式 过 渡 与 变形 、CSS3 高 级 特性 动画 与 3D。 
通过 实践 ， 熟 悉 掌握 CSS3 的 使 用 。CSS3 动画 与 3D 属于 CSS3 的 核心 内 容 ， 在 实际 开 


transform:rotateY (-180deg); 


} 


A 
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#main:hover #box div:nth-of-type (1){ background:red; 
transform:rotateY (180deg); } 
#main:hover #box div:nth-of-type (2){ background:blue; 


transform : 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="box"> 
<div>HTML</div> 
<div>Css</div> 
</div> 
</div> 
</body> 
</html> 


J 结果 如 图 13.34 所 示 。 


rotateY (0deg); 


一 少 


般 转 后 的 效果 


} 


图 13.34” 双 面 翻转 实例 


13.5 本 章 小 结 


发 中 应 用 广泛 。 


(1) CSS3 中 变形 用 到 的 属性 是 


13.6 己 


是 
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(2 ) transition 属性 的 四 个 子 属性 为 、 transition-property、 吕 
transition-timing-function。 
(3) CSS3 中 位 移 、 缩 放 、 旋 转 、 倾 斜 默认 都 是 以 元 素 的 进行 变形 。 
(4) animation 属性 是 一 个 复合 属性 ， 主 要 包含 个 子 属性 。 
(5) animation-direction 属性 值 有 罗 因 和 
个 常见 值 。 
2， 选择 题 
(1) 下 列 选项 中 ， 不 属于 transform 属性 的 是 )。 
A. translate B. transition 
C. scale D. rotate 
(2) 与 3D 有 关 的 是 ( 各 
A. @keyframes B. perspective 
C. linear D. -webkit- 
(3) 不 属于 animation-direction 的 可 选 值 的 是 )。 
A. normal B. reverse 
C. backwards D. altemate 
(4) 可 以 实现 一 系列 的 动画 效果 的 是 和 
A. @keyframe B. linear 
C. backwards D. transition 
(5) 不 属于 animation 属性 的 是 )5 
A. animation-duration B. animation-name 
C. nimation-iteration-count D. animation-fill-mode 
3. 思考 题 


(1) 请 简 述 如 何 制作 一 个 立方 体 。 


(2) 请 简 述 transition 与 animation 的 区 别 。 
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移动 端 布局 与 啊 应 式 开发 


本 章 学 习 目 标 

。 了 解 移动 端 及 手机 基本 概念 ; 

。 掌握 移动 端 布局 ，viewport 窗口 和 rem 单位 ; 

e 掌握 移动 端 开 发 ， 弹 性 盒 模型 和 响应 式 。 

随 着 智能 手机 的 诞生 ， 移 动 互 联网 成 为 当下 最 热门 的 话题 ， 而 移动 端 开发 也 成 为 未 
来 技术 的 发 展 方向 。 在 本 章 中 将 学 习 与 移动 端 相 关 的 HTML+CSS 部 分 的 内 容 ， 包 括 移 
动 端 布局 、 弹 性 盒 模型 、 响 应 式 开发 等 知识 。 这 些 都 属于 最 新 的 前 沿 技术 ， 也 是 未 来 
HTML+CSS 的 发 展 方向 。 





14.1 移动 正 布 局 


移动 端 布局 与 PC (电脑 ) 布 局 有 很 多 不 同 之 处 ， 如 移动 端 设备 的 尺寸 不 一 ， 需 要 
对 设备 进行 适 配 处 理 ， 移 动 端 横 屏 竖 屏 切换 ， 需 要 有 针对 性 的 响应 式 布局 等 。 


14.1.1 移动 端 模拟 器 


移动 端 布局 需要 可 以 模拟 不 同 的 手机 设备 的 移动 端 开发 环境 .Chrome 浏览 器 自 带 移动 
端 模 拟 器 ， 通 过 F12 键 开 启 调 试 控制 台 ， 找 到 如 图 贞 ] 的 手机 图 标 ， 单 击 后 即 可 从 PC 浏览 
器 切换 到 移动 端 模拟 器 。 打 开 任 意 网 站 ， 刷 新 浏览 器 ， 可 显示 此 网 站 移动 端的 展示 效果 。 
移动 端 模拟 器 可 进行 不 同 设 备 的 选择 ， 还 包括 横竖 屏 切换 ， 模 拟 网 络 延 迟 等 功能 。 
选择 不 同 设备 和 横 屏 显示 如 图 14.1 所 示 。 
phone5 了 568 x 320 100% 了 © 
Responsive 


N E23 Galaxy 55 
@ /15M 育 交 


Nemus 6p 
iphone 5 
iphone 6 
iphone 5 plus 
ipad 


图 14.1 选择 不 同 设备 和 横 屏 显示 
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14.1.2 手机 的 基本 概念 


了 解 手 机 的 基本 概念 对 移动 端 开发 的 理解 有 很 大 的 帮助 。 下 面 以 iPhone5 手机 为 例 ， 
讲解 屏幕 分 辩 率 、 物 理 像素 与 CSS 像素 、PPI、DPR 等 名 词 。 


1， 屏 幕 分 辩 率 


iPhones 的 屏幕 分 辩 率 为 1136X 640， 指 手机 的 竖 排 有 1136 个 像素 ， 横 排 有 640 个 
像素 。 即 屏幕 像素 为 72.7 万 , 注意 72.7 万 是 指 手 机 屏幕 的 像素 值 ,不 是 手机 拍照 的 像素 
值 。 一 般 手机 拍照 的 像素 值 会 很 高 ， 如 iPhones 手机 拍照 像素 值 为 800 万 像素 。 

并 不 是 屏幕 的 分 辩 率 越 高 屏幕 就 越 大 ， 屏 幕 的 大 小 由 屏幕 的 尺寸 决定 ， 屏 幕 的 尺寸 
指 屏幕 对 角 线 的 长 度 ， 一 般 单 位 为 英寸 。 如 iPhones 屏幕 尺寸 为 4 英寸 。 常 用 手机 屏幕 
尺寸 大 小 如 图 14.2 所 示 。 


iPhone 6 Plus iPhone6 iPhone 5 























14.2 手机 屏幕 的 尺寸 大 小 


2. 物理 像素 与 CSS 像素 


上 面 提 到 的 iPhone5 的 屏幕 分 辨 率 为 1136X 640， 指 的 是 物理 像素 。 物 理 像素 的 单 
位 为 dp〈 点 )， 属 于 设备 无 关 像 素 值 ， 设 备 能 控制 显示 的 最 小 单位 ， 可 以 把 这 些 像素 看 
成 显示 器 上 一 个 个 的 点 。 

CSS 像素 也 叫 罗 辑 像素 是 浏览 器 使 用 的 抽象 单位 ，iPhones 的 CSS 像素 为 568 X320。 
CSS 像素 的 单位 为 px， 是 指 通常 做 网 页 时 用 到 的 CSS 像素 。 在 PC 设备 上 1 个 物理 像素 
等 于 1 个 CSS 像素 ， 但 在 移动 端 Phone5 上 4 个 物理 像素 等 于 1 个 CSS 像素 。 

屏幕 分 辩 率 是 指 物理 像素 ， 而 实际 屏幕 大 小 对 应 的 是 CSS 像素 。 物理 像 素 进行 压缩 
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处 理 ， 使 4 个 物理 像素 对 应 1 个 CSS 像素 ， 目 的 是 为 了 显示 高 清 的 效果 ， 这 种 技术 叫 作 
Retina 高 清 视网膜 屏 。 


3 PPI 





PPI 全 称 是 pixel per inch， 即 每 英寸 内 有 多 少 个 像素 点 ， 其 像素 点 指 的 是 物理 像素 ， 
可 表示 像素 密度 。PPI 的 值 越 高 ， 画 质 越 好 ， 即 越 细腻 。 通 过 以 下 公式 换算 ， 如 图 14.3 
所 示 。iPhones 下 的 PPI 为 326。 


入 机 向 <(Pbiel) 十 杖 向 (pice) 


屏幕 尺 填 (incen) 


PRI= 


14.3 PPI 计算 公式 


PPI 值 越 高 说 明 屏幕 越 清 晰 ， 一 般 把 PPI 值 大 于 320 的 设备 ， 都 可 以 看 作 是 Retina 
高 清 视 网 膜 屏 。 


4. DPR 


DPR 全 称 是 devicePixelRatio， 中 文 叫 作 “像素 比 ”。DPR 值 是 物理 像素 与 CSS 像素 
的 比值 ， 可 以 是 横 排 像素 比 ， 也 可 以 是 竖 排 像素 比 。 在 下 hone5 下 无 论 横 排 还 是 竖 排 ， 
DPR 值 都 为 2。DPR 可 通过 JavaScript 语法 window.devicePixelRatio 语法 来 获取 ，DPR 
值 对 于 布局 是 有 帮助 的 ， 可 以 通过 DPR 值 进行 换算 处 理 。 


14.1.3 viewport 


移动 端 布局 中 会 涉及 到 一 个 viewport 的 概念 。 在 移动 端 viewport 有 两 个 ，visual 
viewport 即 视 口 viewport 和 layout viewport 即 布 局 Viewport。 

视 口 viewport 在 布局 viewport 上 方 , 且 视 口 viewport 大 小 固定 不 变 , 而 布局 viewport 
大 小 可 随时 改变 ，iPhone 默认 的 布局 viewport 为 980px。 

视 口 viewport 的 大 小 是 固定 的 , 这 样 会 导致 布局 viewport 值 越 大 viewport 窗口 就 缩 
小 越 多 ， 同 时 显示 的 内 容 也 就 越 多 。 虽 然 能 看 到 整个 页 面 ， 但 看 不 清 页 面 的 细节 。 需 要 
通过 双 指 进行 滑动 放大 处 理 ， 这 样 会 给 用 户 带 来 使 用 不 便 的 体验 。 

iPhone 默认 设置 viewport 为 980px 是 因为 当时 并 没有 太 多 的 网 页 可 以 支持 移动 端 布 
局 ， 布 局 viewport 太 小 ， 只 能 看 到 网 页 的 局 部 效果 ， 如 图 14.4 右 侧 显示 效果 ， 界 面体 验 
效果 不 佳 。 当 把 布局 默认 设置 为 980px 时 ， 可 以 看 清 整 个 页 面 ， 布 局 viewport 导致 页 面 
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缩放 如 图 14.4 所 示 。 












Ny 三 ) 


| 日 | 癌 加 胶 六 体育 0 






JE 吸 乔 治 通知 球 队 明 夏 高 从 it 
三 者 开 遇 开 汉 条 全: 一 下 迷 竺 一 
流 十 可 讨 交 因 。 人 了 手 入 局 
车 末 十 : 简 及 炮 半 个 5 




















页 面 被 缩放 效果 


页 面 正常 显示 效果 


14.4 布局 viewport 导致 页 面 缩 放 


在 如 今 的 网 页 中 ， 设 计 师 可 以 针对 移动 端 进行 页 面 设计 ， 因 此 网 页 不 需要 设计 得 太 
大 。 这 样 布局 viewport 的 值 就 需要 与 设计 的 页 面 大 小 相同 , 从 而 可 以 正常 显示 页 面 效 果 ， 


如 图 14.5 所 示 。 









(全 放 抽 体育 


. 
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关机 让 !C 罗 与 全 世界 为 故 即 鞭 独 
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过 要 乔 震 亿 过 秆 上 汝 宣 力 中 交 : 捷 







联合 会 什 -23 时 视 胸 丁 揪 测 大 利 
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四 | 
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图 14.5 专门 针对 移动 端的 页 面 设计 
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通过 <meta> 标 签 可 以 对 viewport 属性 进行 重新 设置 。 其 语法 格式 如 下 。 
<meta name="viewport" content=" 属 性 1= 值 1， 属 性 2= 值 2" 


name 属性 用 来 指定 viewport 方式 ， 而 content 属性 用 来 对 viewport 进行 具体 值 的 设 
置 ， 可 选 设置 有 width、initial-scale、minimum-scale、maximu-scale 和 user-scalable 五 种 
选择 。 下 面 将 分 别 介绍 这 五 种 选择 。 

(1) width 

width 用 于 设置 布局 viewport 的 特定 值 , 可 以 设 定 一 个 具体 的 数值 ， 如 320、450 等 。 
移动 端 设备 的 尺寸 差异 很 大 ， 因 此 一 般 不 设置 固定 值 ， 例 如 : iPhone 系列 ，iPhones 的 
页 面 宽 为 320px，iPhone6 的 页 面 宽 为 375px，iPhone6 plus 为 414px。 固 定 值 很 难 适 配 多 
种 设备 ,因此 width 属性 有 device-width 值 ， 可 以 根据 屏幕 的 宽 自 动 调整 ， 始 终 与 屏幕 的 
宽 保 持 相 同 ， 从 而 达到 适 配 不 同 设备 的 目的 。 有 具体 示例 如 下 。 











<meta name="viewport" content="width=device-width"> 


(2) initial-scale 
initial-scale 用 于 设置 页 面 的 初始 缩放 比例 ， 一 般 不 会 对 页 面 进行 缩放 处 理 ， 因 此 取 
值 都 为 1 或 1.0。 有 具体 示例 如 下 。 


<meta name="viewport" content="initial-scale=1.0"> 


(3) minimum-scale 

minimum-scale 用 于 设置 最 小 缩放 ， 一 般 不 会 让 用 户 进行 缩放 处 理 ， 因 此 也 就 不 用 
设置 最 小 或 最 大 缩放 ， 一 般 取 值 为 1 或 1.0。 具 体 示 例如 下 。 

<meta name="viewport" content="minimum-scale=1.0"> 


(4) maximum-scale 

maximum-scale 用 于 设置 最 大 缩放 ， 取 值 与 minimum-scale 相同 。 

(5) user-scalable 

user-scalable 表示 用 户 能 耕 进 行 缩放 处 理 ， 可 选 值 为 yes 和 no。 一 般 情况 下 ， 不 需 
要 对 页 面 进行 缩放 处 理 ， 因 此 取 值 为 ho。 具体 示例 如 下 。 

<meta name="viewport" content="user-scalable=no"> 

常见 的 viewport 设置 如 下 所 示 ， 但 不 代表 所 有 的 页 面 都 采用 同一 个 viewport 设置 。 
后 面 小 节 中 将 讲解 两 种 不 同 的 移动 端 布局 方案 ， 这 两 种 方案 采用 不 同 的 viewport 方式 进 
行 设置 。 











<meta name="viewport" content="width=device-width, 
initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, 


user-scalable=no"> 
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14.1.4 ”移动 端 布局 方案 


1. 第 一 种 布局 方案 


下 面 先 来 分 步骤 讲解 移动 端的 第 一 种 布局 方案 。 具 体 如 例 14-1 所 示 。 

【 例 14-1】 第 一 种 布局 方案 。 

(1) 设 计 图 大 小 与 屏幕 的 CSS 像素 大 小 相同 , 如 让 Phones 页 面 要 设计 成 宽度 为 320px。 
设计 师 只 需 对 一 种 设备 进行 设计 ， 然 后 通过 viewport 进行 适 配 处 理 。 腾 讯 体育 移动 版 网 
页 布局 设计 出 的 腾讯 体育 320px 设计 图 如 图 14.6 所 示 。 





[全 腾讯 杀 育 
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图 14.6 腾讯 体育 320px 设计 图 





(2) 设置 布局 viewport 为 屏幕 大 小 ， 且 用 户 不 能 对 页 面 进行 缩放 处 理 。 具 体 代码 
如 下 。 
<head> 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, 
user-scalable=no"> 
</head> 


(3) 对 HTML 结构 进行 划分 ，header( 头 部 )、nav〔( 导 航 )、banner (广告 ) 等 。 具 
体 代码 如 下 。 


1 <body> 


wm 必 wwN PP 


-2 





六 


(4) 


如 下 。 


于 
区 
了 
4 
本 
6 
六 
8 
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<div id="header"> 


<div id="1ogo"> 
<a href="#"> 腾 讯 体育 </a> 
</div> 
<div id="menuBtn"> 
<a href="#"></a> 
</div> 


</div> 
<div id="nav"> 


<ul> 
<li class="current"><a href="#"> 体 育 </a></1i> 
<li><a href="#">NBA</a></1i> 

</ul> 


</div> 
<div id="banner"> 


<a href="#"><img src="qqBanner.jpg"></a> 


<p> 丁 宁 时 尚 大 片 又 帅 又 美 </p> 


</div> 
</body> 


设置 CSS reset， 取 消 HTML 标签 的 默认 样式 和 设置 一 些 初始 样式 。 具 体 代 码 


<style> 


/*css reset*/ 

*{ margin:0; padding:0; } 

li{ list-style:none; } 

img{ border:none; vertical-align:top; } 

af text-decoration:none; } 

body{ font-family:Helveticca,STHeiti,Droid Sans Fallback; } 


</style> 


(5) 移动 端 一 般 采用 自 适 应 百分比 的 方式 进行 布局 。 具 体 代码 如 下 。 


下 
2 
E 
4 
3 
6 
池 
8 
9 
和 


<style> 


/*header start*/ 

#header{ height:44px; padding:7px 0 0 10px; 
background:#fafafa Url (qqHeaderBg.png) no-repeat 162px 0; 
box-sizing:border-box; position:relative; } 

#logo{ width:119px; height:30px; 
background:url (qqLogo.png) no-repeat; } 

#1ogo af width:100%; height:100%; 
display:block; text-indent:-9999px; } 

#menuBtn{ width:22px; height:16px; 
background:url (qqHeaderMenuBtn.png) no-repeat; 
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position:absolute; right:14px; top:14px; } 

#menuBtn a{ width:100%; height:100%; display:block; } 

/*nav start*/ 

#nav{ height:40px; background:#3e86ce; border:2px #317ecb solid; } 

#nav ul{ padding:5px 0 0 0; } 

#nav li{ float:left; width:64px; height:30px; font-size:18px; 
text-align:center; line-height:30px; } 

#nav li af color:white; } 

#nav .current{ background:#226fbb; } 

/*banner start*/ 

#banner{ width:100%; position:relative; } 

#banner img{ width:100%; } 

#banner p{ position:absolute; bottom:S5px; color:white; } 


25 </style> 


保存 文档 ， 运 行程 序 。 在 浏览 器 中 ， 按 下 F12 键 查看 移动 端 布局 ， 效 果 如 图 14.7 


所 示 。 





iphone5 320 x 568 i00%v © 


(AD) 腾讯 体 育 三 





14.7 第 一 种 布局 方案 效果 
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2. 第 二 种 布局 方案 


(1) 设计 图 大 小 与 屏幕 的 物理 像素 大 小 相同 。 如 iPhones 页 面 要 设计 成 宽度 为 
640px， 然 后 对 设计 图 进行 缩放 处 理 。 这 种 方式 比 第 一 种 布局 方案 制作 出 来 的 效果 更 细 
腻 、 更 清晰 ， 但 实现 起 来 比 第 一 种 布局 方案 更 复杂 ， 因 此 这 两 种 布局 方案 各 有 利弊 ， 可 
根据 项 目 进行 选择 。 在 第 一 种 方案 中 ， 设 计 图 的 1 个 像素 对 应 1 个 CSS 像素 ， 即 对 应 4 
个 物理 像素 。 而 在 第 二 种 方案 中 ， 设 计 图 的 4 个 像素 对 应 1 个 CSS 像素 ， 即 设计 图 的 1 
个 像素 对 应 1 个 物理 像素 ， 因 此 物理 像素 可 识别 的 颜色 更 多 ， 显 示 出 的 效果 更 好 ， 淘 宝 
网 移动 版 网 页 进行 布局 设计 出 的 淘宝 网 640px 设计 图 如 图 14.8 所 示 。 
























TRENDIANO 


时 央 罗 多 
| Pra 


e009 


天 猫 聚 划算 淘 生 活 淘 点 点 ”天 猫 超 市 
充值 阿里 旅行 。 领 金币 赢 宝箱 
14.8 淘宝 网 640px 设计 图 


(2) 根据 DPR 像素 比 换算 出 viewport 的 初始 缩放 值 ， 需 要 配合 JavaScript 来 完成 。 
具体 代码 如 下 


1 <script> 


2 var dpr = window.devicePixelRatio; 
| Var scale = 1/dpr; 
4 document .write ('<meta name="viewport" content="width=device- 


width,initial-scale='+scale+'vminimum-scale='+scale+',maximum-scale= 
'+scalet+',user-scalable=no">"'); 


5 </script> 

(3) 当 采 用 物理 像素 进行 设计 时 ， 不 同 设备 的 页 面 大 小 有 很 大 差距 ， 因 此 同一 尺寸 
在 不 同 的 屏幕 下 , 显示 效果 会 有 很 大 差异 。 接 下 来 通过 案例 来 演示 , 具体 如 例 14-2 所 示 。 

【 例 14-2】 采用 物理 像素 进行 设计 时 ， 同 一 尺寸 在 不 同 屏幕 下 的 显示 效果 不 同 。 


各 <!doctype html> 
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<html> 

<head> 
<title> 移 动 端 布局 </title> 
<style> 


</style> 

</head> 

<body> 

<div id="box"></div> 
</body> 


运行 结果 如 图 14.9 所 示 。 


WoO OD WW MM 


上 
Le 一 


iphone5 了 


#box{ width:100%; height:300px; background:red; } 


320 x 568 lm0%v © 





iphone 6Plos 9 


414 x 736 i0%r © 





14.9 元素 在 不 同 设备 下 的 显示 


图 14.9 中 可 以 发 现 ， 同 一 尺寸 的 元 素 ， 在 不 同 的 设备 下 ， 显 示 效 果 很 大 差异 。 如 
iPhone6 plus 显示 高 度 感觉 比 用 iPhone5 显示 的 高 度 小 。 

(4) 移动 端 布局 单位 rem 和 em 解决 显示 的 差异 性 ,rem(font size of the root element) 
是 指 相对 于 根 元 素 的 字体 大 小 的 单位 ，em (font size of the element) 是 指 相对 于 父 元 素 
的 字体 大 小 的 单位 。 它 们 之 间 很 相似 ，rem 单位 计算 的 规则 是 依赖 于 根 元 素 ， 而 em 依 


赖 于 父 元 素 计算 。 二 者 都 是 相对 单位 ， 





因此 对 于 不 同 的 屏幕 大 小 ， 动 态 地 改变 font-size 


值 ， 可 以 让 rem 换算 后 的 尺寸 在 不 同 的 屏幕 下 显示 的 效果 接近 。 修 改 例 14-2 的 代码 , 具 


体 如 下 。 


<style> 


#box{ width:100%; height:4.6875rem; background:red;} 


1 
区 
3 <y/atyls> 
4 <script> 
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var fontSize = document.documentElement.clientWidth/10; 
Var oHtml = document .getElementsByTagName ('html') [0]; 
oHtml .style.fontSize = fontSize + "PKX'"7 


co ~ au 


</ Script> 


运行 结果 如 图 14.10 所 示 。 


Phone5w 320 x 568 100 © 





jphone6plus9 4 x 736 i100%v © 





14.10 ”rem 适 配 显示 效果 


(5) 下 面 利用 第 二 种 布局 方案 制作 淘宝 网 移动 端 首页 效果 ， 具 体 如 例 14-3 所 示 。 
【 例 14-3】 利用 第 二 种 布局 方案 制作 淘宝 网 移动 端 首页 效果 。 


和 <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 移 动 端 布局 </title> 

6 <style> 

蚂 *{ margin:0; padding:0; } 

8 li{ list-style:none; } 

9 img{ border:none; vertical-align:top; } 

10 af text-decoration:none; } 

1 #header{ width:100%; height:1.5rem; background:#ff4400; 

EE padding:0.375rem 0 0 0.4375rem; box-sizing:border-box; } 
13 #logo{ float:left; width:0.984375rem; height:0.75rem; 

14 background:url (logo.png) no-repeat; background-size:cover; } 
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#logo af width:100%; height:100%; display:block; 
text-indent:-156.234375rem; } 

#search{ float:left; width:7.5rem; height:1rem; 
background:#d42d00; border-radius:4px; 
margin:-0.09375rem 0 0 0.59375rem; font-size:0.46875rem; 
line-height:1lrem; text-align:center; color:white; } 

#banner{ width:100%; } 

#banner img{ width:100%; } 

#nav ul li{ width:1.15625rem; height:1.640625rem; 
background:url (icon.jpg) no-repeat center 0; float:left; 
margin:0.3125rem 0 0 0.703125rem; line-height:2.96875rem; 
text-align:center; color : #666666; font-size:0.3125rem; 
background-size:contain; } 

</style> 
</head> 
<script> 

var dpr = window.devicePixelRatio; 

var scale = 1/dpr; 

document .write ('<meta name="viewport" content="width=device-width, 

initial-scale='+scale+',minimum-scale='+scale+',maximum-scale= 
'+scale+',user-scalable=no">"'); 

Var fontSize = document.documentElement.clientWidth/10; 

Var oHtml = document .getElementsByTagName ('html') [0]; 

oHtml .style.fontSize = fontSize + 'px'; 

</script> 
<body> 
<div id="header"> 


<div id="logo"> 
<a href="#"> 淘 宝 网 </a> 
</div> 
<div id="search"> 等 你 一 起 破浪 前 行 </div> 
</div> 
<div id="banner"> 


<img src="banner.jpg"> 
</div> 
<div id="nav"> 
<ul> 
<1i> 天 猫 </1i> 
<1i> 天 猫 </1i> 
<1i> 天 猫 </1i> 
<1i> 天 猫 </1i> 
<1i> 天 猫 </1i> 
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55 <1i> 天 猫 </1i> 
56 <1i> 天 猫 </1i> 
57 <1i> 天 猫 </1i> 
58 <1i> 天 猫 </1i> 
59 <1i> 天 猫 </1i> 
60 </ul> 

61 </div> 

62 </body> 

63 </html> 


运行 结果 如 图 14.11 所 示 。 


iphone6Plusv 414 x 735 75%v © 





iphoneSsv 320 x 558 10%xv © 


Mone =320p% 淘 等 你 一 起 破浪 前 行 
/ 


> 、。 黎 征 名 表 
= 2 底价 起 拍 


等 你 一 起 破浪 前 行 


黎 任 名表 
底价 起 拍 





图 14.11 hone5 和 让 Phone6 Plus 下 展示 效果 


14.2 ”弹性 盒 模 型 


为 了 解决 传统 布局 的 不 足 ，CSS3 增加 了 新 型 的 弹性 盒 模型 。 通 过 弹性 盒 模型 ， 可 
以 轻松 地 创建 自 适 应 浏览 器 窗口 的 流动 布局 。 
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14.2.1 flex 方式 


CSS3 通过 display 属性 的 flex 值 来 实现 弹性 盒 模型 .对 于 两 个 未 知 宽 高 的 父子 元 素 ， 
左右 居中 比较 容易 实现 ， 而 上 下 居中 不 太 容易 实现 ， 使 用 flex 弹性 盒 模型 可 以 很 容易 实 
现 两 个 未 知 宽 高 的 父子 元 素 , 子 元 素 在 父 元 素 中 上 下 居中 展示 。 接 下 来 通过 案例 来 演示 ， 
具体 如 例 14-4 所 示 。 

【 例 14-4】 通过 display 属性 的 flex 值 实现 弹性 盒 模型 。 





L <!doctype html> 

2 <html> 

3 <head> 

4 <meta charset="utf-8"> 

5 ”<title> 弹 性 傅 模 型 </title> 

6 <style> 

7 #main{ width:150px; height:150px; 

8 border:1px black solid; display:flex; } 
9 #box{ width:50px; height:50px; background:red; 
10 margin:auto; } 

11 </style> 

12 </head> 

13 <body> 

14 <div id="main"> 

二 <div id="box"></div> 

16 </div> 

17 </body> 

18 </html> 


运行 结果 如 图 14.12 所 示 。 











C IO fleVWDVHTMLexample/chapter14/14-4.html 女 | 

















图 14.12 元 素 上 下 左右 居中 处 理 


14.2.2 ”排列 与 对 齐 


在 CSS3 弹性 盒 模型 中 ， 可 以 使 用 flex-direction 属性 定义 弹性 盒子 内 部 子 元 素 的 排 
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列 方向 ， 也 就 是 盒子 内 部 的 子 元 素 的 排列 方向 。 其 属性 取 值 及 子 元 素 排 列 方 向 如 表 14.1 
所 示 。 


表 14.1 flex-direction 属性 取 值 及 排列 方向 








属 性 值 子 元 素 排列 方向 
Iow (默认 值 ) 默认 的 排列 方向 为 水 平 排列 
TOW-IeVverse 反 向 水 平 排列 ， 靠 右 侧 进 行 展示 ， 注 意 第 一 项 子 元 素 在 最 右 侧 
column 垂直 排列 





反 向 垂直 排列 ， 靠 下 方 进行 排列 展示 ， 注 意 第 一 项 子 元 素 在 最 下 方 


column-reverse 





表 14.1 列 出 了 flex-direction 属性 的 取 值 及 子 元 素 排列 方向 , 接 下 来 通过 案例 来 演示 
反 向 水 平 排列 和 反 向 垂直 排列 ， 有 具体 如 例 14-5 所 示 。 
【 例 14-5】 反 向 水 平 排列 和 反 向 垂直 排列 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 弹 性 盒 模型 </title> 
<style> 
#mainl{ width:200px; height:200px; border:1lpx black solid; 
display:flex; flex-direction:row-reverse; } 
#main2{ width:200px; height:200px; border:1lpx black solid; 


display:flex; flex-direction:column-reverse; } 


虽 oowamuwm 必 swN 


上 
-oo 


.box{ width:50px; height:50px; background:red; 
12 color:white; line-height:50px; text-align:center; } 
13 </style> 

14 </head> 

15 <body> 

16 <div id="main1"> 

17 <div class="box">1</div> 

18 <div class="box">2</div> 

19 <div class="box">3</div> 

20 </div> 

21 <div id="main2"> 

2 <div class="box">1</div> 

23 <div class="box">2</div> 

24 <div class="box">3</div> 

25 </div> 

26 </body> 

27 </html> 


运行 结果 如 图 14.13 所 示 。 
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14.13 ” 反 向 水 平和 反 向 垂直 排列 
假设 flex-direction 属性 取 值 为 row 时 ， 水 平 排列 ， 因 此 把 水 平方 向 看 作 “ 主 轴 ”。 
主轴 有 对 应 的 主轴 对 齐 方式 。 主 轴 对 齐 方式 通过 justify-content 属性 进行 设置 其 属性 值 
及 主轴 对 齐 方式 如 表 14.2 所 示 。 


表 14.2 justify-content 属性 取 值 及 主轴 对 齐 方 式 





主轴 对 齐 方 式 





flex-start (默认 值 ) 
flex-end 






右 对 齐 

居中 对 齐 

两 端 对 齐 ， 元 素 之 间 的 间隔 都 相等 

每 个 元 素 两 侧 的 间隔 相等 。 元 素 之 间 的 间隔 比 元 素 与 边框 的 间隔 大 一 倍 

















center 





space-between 








space-around 


表 14.2 列 出 了 justify-content 属性 取 值 及 主轴 对 齐 方式 。 接 下 来 通过 案例 来 演示 
justify-content 属性 值 及 主轴 对 齐 方式 ， 具 体 如 例 14-6 所 示 。 
【 例 14-6】 justify-content 属性 值 及 主轴 对 齐 方 式 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 弹 性 盒 模型 </title> 





am 心 wN PP 


<style> 


#mainl{ width:200px; height:100px; border:1lpx black solid; 
display:flex; flex-direction:row; justify-content:flex-start; 
#main2{ width:200px; height:100px; border:1px black solid; 
display:flex; flex-direction:row; justify-content:flex-end; } 
#main3{ width:200px; height:100px; border:lpx black solid; 
display:flex; flex-direction:row; justify-content:center; 
#main4{ width:200px; height:100px; border:1lpx black solid; 
display:flex; flex-direction:row; justify-content:space-between; } 
#main5{ width:200px; height:100px; border:1lpx black solid; 
display:flex; flex-direction:row; justify-content:space-around; } 
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.box{ width:50px; height:50px; background:red; 


color:white; line-height:50px; text-align:center; } 


</style> 

</head> 

<body> 

<div id="main1"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 

</div> 

<div id="main2"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 

</div> 

<div id="main3"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 

</div> 

<div id="main4"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 

</div> 

<div id="main5"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 

</div> 

</body> 

</html> 





1 


} 
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14.14 ”主轴 对 齐 方 式 


注意 ， 当 flex-direction 属性 取 值 为 column 时 ， 垂 直方 向 变 成 了 “主轴 ” 因此 以 上 
排列 方向 均 变 成 垂直 方向 上 的 对 齐 操作 。 


除了 主轴 外 ， 弹 性 盒 模型 还 提供 了 侧 轴 的 概念 ， 侧 轴 表 示 与 主轴 相反 的 方向 。 
align-items 属性 表示 侧 轴 对 齐 方 式 ， 其 属性 值 及 侧 轴 对 齐 方式 ， 如 表 14.3 所 示 。 


表 14.3 align-items 属性 取 值 及 侧 轴 对 齐 方式 





属 性 值 侧 轴 对 齐 方式 
flex-start 起 始 位 置 对 齐 
center 居中 位 置 对 齐 
flex-end 结束 位 置 对 齐 





表 14.3 中 列 出 了 align-items 属性 取 值 及 侧 轴 对 齐 方式 ， 接 下 来 通过 案例 来 演示 
align-items 属性 的 使 用 ， 具 体 如 例 14-7 所 示 。 


【 例 14-7】 align-items 属性 的 使 用 。 
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运行 结果 如 图 14.15 所 示 。 
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14.15“ 侧 轴 对 齐 方式 


14.2.3 ”换行 与 对 齐 


在 默认 情况 下 , 元 素 都 排 在 一 条 轴线 上 。 当 内 容 太 多 , 使 元 素 在 一 条 轴线 排 不 下 时 ， 


则 需要 用 到 flex-wrap 属性 。 其 属性 值 及 换行 方式 如 表 14.4 所 示 。 


库 


表 14.4 flex-wrap 属性 取 值 及 换行 方式 





属 性 值 换行 方式 
nowrap (默认 值 ) 元 素 不 进行 换行 处 理 
wrap 换行 处 理 ， 第 一 行 在 上 方 
wrap-reverse 反 向 换行 处 理 ， 第 一 行 在 下 方 


表 14.4 列 出 了 flex-wrap 属性 取 值 及 换行 方式 ， 接 下 来 通过 案例 来 演示 flex-wrap 属 
具体 如 例 14-8 所 示 。 
【 例 14-8】 flex-wrap 属性 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1le> 弹 性 盒 模型 </title> 
<style> 
#mainl{ width:200px; height:150px; border:1lpx black solid; 


co wamuwm 必 wmN 


display:flex; flex-direction:row; flex-wrap:nowrap; } 
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运行 结果 如 图 14.16 所 示 。 
align-content 属性 表示 多 行 之 间 的 对 齐 方 式 。 其 属性 值 及 多 行 的 对 齐 方式 如 表 14.5 
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14.16 ”wrap-reverse 换行 的 效果 


表 14.5 align-content 属性 取 值 及 多 行 的 对 齐 方式 








多 行 对 齐 方式 
flex-start 多 行 的 起 点 对 齐 
flex-end 多 行 的 终点 对 齐 
center | 多 行 的 居中 对 齐 





space-between | 多 行 的 两 端 对 齐 ， 轴 线 之 间 的 间隔 平均 分 布 
space-around 每 根 轴线 两 侧 的 间隔 都 相等 。 因 此 轴线 之 间 的 间隔 比 轴 线 与 边框 的 间隔 大 一 倍 











表 14.5 中 列 出 了 align-content 属性 取 值 及 多 行 的 对 齐 方 式 ， 接 下 来 通过 案例 演示 取 
值 为 space-between 和 space-around 时 的 对 齐 方式 ， 具 体 如 例 14-9 所 示 。 

【 例 14-9】 align-content 取 值 为 space-between 和 space-around 时 的 对 齐 方式 。 

<!doctype html> 


2 <html> 
3 <head> 
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运行 结果 如 图 14.17 所 示 。 


14.2.4 ” 子 元 素 属性 


上 述 所 有 的 属性 都 可 以 在 父 元 素 上 添加 ， 子 元 素 上 也 带 有 一 些 相关 的 属性 ， 下 面 将 
介绍 添加 在 子 元 素 上 的 三 个 属性 。 
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14.17 多 行 的 对 齐 方式 


1. order 属性 


order 属性 定义 元 素 的 排列 顺序 。 数 值 越 小 ， 排 列 越 靠 前 ， 默 认为 0。 接 下 来 通过 案 
例 来 演示 ， 具 体 如 例 14-10 所 示 。 
【 例 14-10】 order 属性 的 使 用 。 


Oo Dpe 


pp 记 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1le> 弹 性 盒 模 型 </tit1le> 
<style> 
#main{ width:200px; height:150px; border:lpx black solid; 
display:flex; flex-direction:row; flex-wrap:wrap; 
align-content:space-around; } 
.box{ width:50px; height:50px; background:red; 
color:white; line-height:50px; text-align:center; } 
.box:nth-of-type (1){ order:1; } 
.box:nth-of-type(2){ order:2; } 
</style> 
</head> 
<body> 
<div id="main"> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 
<div class="box">4</div> 


运 和 


<div class="box">5</div> 
<div class="box">6</div> 
</div> 
</body> 
</html> 


了 结果 如 图 14.18 所 示 。 
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14.18 order 的 排序 处 理 


2. align-self 属性 


align-self 属性 允许 单个 元 素 有 与 其 他 元 素 不 一 样 的 对 齐 方式 ， 可 以 设置 值 为 


flex-start、flex-end、center 等 。 接 下 来 通过 案例 来 演示 ， 具 体 如 例 14-11 所 示 。 
【 例 14-11】 align-self 属性 的 使 用 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1le> 弹 性 盒 模 型 </title> 
<style> 
#main{ width:200px; height:150px; border:1lpx black solid; 
display:flex; flex-direction:row; flex-wrap:wrap; 
align-content:space-around; } 
.box{ width:50px; height:50px; background:red; 
color:white; line-height:50px; text-align:center; } 
.box:nth-of-type (1){ align-self:center; } 
.box:nth-of-type (2){ height:80px; line-height:80px; } 
</style> 
</head> 
<body> 


<div id="main"> 
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18 <div class="box">1</div> 
19 <div class="box">2</div> 
20 <div class="box">3</div> 
这 于 <div class="box">4</div> 
2 <div class="box">5</div> 
| <div class="box">6</div> 
24 </div> 
25 </body> 
26 </html> 


运行 结果 如 图 14.19 所 示 。 
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14.19 align-self 的 子 元 素 对 齐 处 理 
3. flex 属性 


flex 属性 设置 元 素 之 间 占 据 的 空间 大 小 ， 值 为 比例 值 ， 也 可 以 设置 固定 的 像素 值 。 
接 下 来 通过 案例 来 演示 ， 具 体 如 例 14-12 所 示 。 
【 例 14-12】 flex 属性 的 使 用 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 弹 性 盒 模 型 </title> 
<style> 
#main{ width:200px; height:50px; border:lpx black solid; 
display:flex; } 


中 mt wm 


.box{ color:white; line-height:50px; text-align:center; } 
-box:nth-of-type (1){ background:red; flex:1;7 } 
-box:nth-of-type (2){ background:blue; flex:2; } 
.box:nth-of-type (3) { background:green; flex:3; } 

</style> 

</head> 


上 上 
-oo 
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15 <body> 

16 <div id="main"> 

Ey/ <div class="box">1</div> 
18 <div class="box">2</div> 
9 <div class="box">3</div> 
20 </div> 

21 </body> 

22 </html> 


运行 结果 如 图 14.20 所 示 。 
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14.20 flex 按 比例 分 配 


例 14-12 中 元 素 一 占 空间 的 /6, 元 素 二 占 空间 的 1/3, 元 素 三 占 空间 的 112。 当 设置 
其 中 一 列 为 固定 值 时 ， 可 实现 一 列 固定 两 列 自 适 应 的 布局 方案 ， 比 前 面 章 节 中 介绍 的 
HTML 布局 方案 实现 起 来 要 简单 很 多 。 修 改 例 14-12 代码 如 下 。 


于 <style> 

吧 #main{ width : 200px; height : 200px; border : lpx black solid; 
3 display : flex; } 

4 .box{ color : white; line-height : 50px; text-align : center; } 
下 .box:nth-of-type (1){ background : red; flex : 1; } 

6 .box:nth-of-type(2){ background : blue; width : 100px; } 

nh .box:nth-of-type(3){ background : green; flex : 1; } 

8 </style> 


保存 文档 ， 刷 新 网 页 ， 运 行 结果 如 图 14.21 所 示 。 
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图 14.21 flex 实现 中 间 固 定 左右 自 适应 


接 下 来 通过 演示 百度 首页 移动 端的 导航 菜单 的 实现 效果 ， 来 进一步 巩固 对 弹性 盒 模 
型 的 理解 。 具 体 如 例 14-13 所 示 。 
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【 例 14-13】 百度 首页 移动 端的 导航 菜单 实现 效果 。 


运行 结果 如 图 14.22 所 示 。 





第 GL》 章 移动 端 布 局 与 响应 式 开发 453 





iPhone 5 ™ 


320 x 568 100% 了 © 
( 四 明 加 汪 : 
iphone6Plus ¥ 414 x 736 1l00%v © 
© | 省 5 





Dw 
本 
加 


图 14.22 百度 导航 弹性 布局 
14.3 ”响应 式 开 发 


响应 式 开发 的 目的 是 使 一 套 代码 可 以 适应 不 同 尺寸 的 设备 ， 比 如 : PC、 平 板 、 手 机 
端 ， 以 达到 减 小 开发 量 ， 提 升 可 维护 性 的 目的 。 


14.3.1 媒体 查询 


响应 式 开发 是 利用 CSS3 当中 的 媒体 查询 功能 来 实现 的 ， 即 @media 方式 。 使 用 
@media 查询 ， 可 以 针对 不 同 的 媒体 类 型 和 屏幕 尺寸 来 定义 不 同 的 样式 操作 。 其 语法 格 
式 如 下 : 

emedia 媒体 类 型 and 媒体 条 件 {} 

其 中 媒体 类 型 和 媒体 条 件 取 值 及 含义 如 表 14.6 和 14.7 所 示 。 


表 14.6 媒体 类 型 取 值 及 含义 
取 值 














含 义 
all 用 于 所 有 设备 
print 用 于 打印 机 和 打印 预览 
screen 用 于 电脑 屏幕 、 平 板 电脑 、 智 能 手机 等 
Speech 


应 用 于 屏幕 阅读 器 等 发 声 设备 
表 14.7 媒体 条 件 取 值 及 含义 

















max-width 定义 输出 设备 中 的 页 面 最 大 可 见 区 域 宽度 
min-width 定义 输出 设备 中 的 页 面 最 小 可 见 区 域 宽度 
max-height 定义 输出 设备 中 的 页 面 最 大 可 见 区 域 高 度 
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续 表 
取 值 含 
min-height 定义 输出 设备 中 页 面 最 小 可 见 区 域 高 度 
orientation 定义 输出 设备 中 的 页 面 为 portrait 竖 屏 还 是 landscape 横 屏 





下 面 定义 媒体 查询 当 屏幕 满足 最 小 宽度 值 为 500px 时 , 执行 此 CSS 样式 ; 当 屏 幕 小 


于 500px 时 ， 则 不 执行 此 CSS 样式 。 具 体 示例 如 下 。 


日 <style> 

A @media all and (min-width:500px){ 

2 #box{ width:100px; height:100px; background:red; } 
浊 } 

5 </style> 

6 <body> 

7 <div id="box"></div> 

8 </body> 


多 条 件 查询 ， 当 屏幕 满足 最 小 宽度 值 为 500px， 并 且 同 时 满足 最 大 宽度 值 为 700px 


时 ， 执 行 此 CSS 样式 ， 当 屏幕 小 于 500px 或 是 大 于 700px 时 ， 都 不 执行 此 CSS 样式 。 
具体 示例 如 下 。 


EL <style> 

总 @media all and (min-width:500px) and (max-width:700px){ 
3 #box{ width:100px; height:100px; background:red; } 
4 } 

5 </style> 


当 页 面 在 横 屏 时 ， 执 行 此 CSS 样式 ， 当 页 面 在 竖 屏 时 ， 不 执行 此 CSS 样式 。 具 体 


示例 如 下 。 


1 <style> 

@media all and (orientation:landscape){ 

3 #box{ width:100px; height:100px; background:red; } 
a , 

5S </style> 


关键 词 “not” 是 用 来 排除 某 种 制定 的 媒体 类 型 ， 即 用 来 排除 符合 表达 式 的 设备 。 换 


句 话说，not 关键 词 表示 对 其 后 的 表达 式 执行 取 反 操作 。 下 面 代码 表示 竖 屏 时 ， 执 行 此 
CSS 样式 。 具 体 示例 如 下 。 





1 <style> 
2 @media not all and (orientation:landscape){ 
3 #box{ width:100px; height:100px; background:red; } 
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除了 可 以 直接 在 CSS 样式 中 添加 媒体 查询 外 ， 还 可 以 通过 <link> 的 方式 添加 媒体 查 
询 的 操作 。 具 体 示例 如 下 。 


14.3.2 ”查询 顺序 


响应 式 开发 遵循 一 定 的 查询 原则 ， 下 面 介绍 两 个 查询 的 原则 。 
(1) 通用 样式 写 在 前 面 ,响应 式样 式 写 在 后 面 。 因 为 后 面 的 样式 会 覆盖 前 面 的 样式 ， 
因此 响应 式 的 目的 就 是 替换 之 前 的 样式 效果 。 具 体 示 例如 下 。 


(2) 当 出 现 多 个 媒体 查询 时 ， 先 去 响应 式 大 屏幕 青 去 响应 式 小 屏幕 ， 达 到 一 种 分 辨 
率 递减 的 适 配 方式 。 具 体 示例 如 下 。 
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13 

14 {i 

5 @media all and (max-width:480px) { 
16 #headert{...} 

17 

18 i? 


19 </style> 


14.3.3 修改 样式 





下 面 是 仿照 jQuery 官方 网 站 制作 的 响应 式 布局 开发 。 先 看 下 仿 jQuery 在 PC 端的 展 
示 效 果 ， 如 图 14.23 所 示 。 
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14.23 仿 jQuery 官网 在 PC 端的 效果 展示 


- 般 情 况 下 ， 响 应 式 的 常见 修改 样式 有 以 下 几 种 。 
(1) display 属性 由 block 转 成 none， 或 是 由 none 转 成 block， 因 为 移动 端 页 面 和 PC 
端 页 面 的 尺寸 相差 很 大 ， 可 能 有 些 元 素 在 不 同 的 屏幕 大 小 下 会 显示 或 者 会 被 隐藏 。 具 体 
示例 如 下 。 


1 <style> 

孔 @media all and (max-width:480px) { 

3 -hdWrap, .nav{ display:none; } 

4 .navSel{ display:block; width:100%; margin-bottom:10px; } 
5 } 

6 </style> 


修改 后 样式 如 图 14.24 所 示 。 
可 以 看 到 ， 红 色 区 域 的 元 素 在 小 于 480px 时 会 显示 ， 而 PC 端的 导航 菜单 会 隐藏 。 
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Lightweight Footprint 
图 14.24 display 控制 样式 显示 隐藏 
(2) width 属性 从 百分比 转 成 具体 像素 值 ， 或 是 从 具体 像素 值 转 成 百分比 ， 因 为 移 


动 端 页 面 的 宽度 一 般 需 要 自 适 应 屏幕 的 大 小 ， 而 PC 端 页 面 的 宽度 一 般 为 固定 尺寸 。 
体 示 例如 下 。 





于 <style> 

受 @media all and (max-width:600px) { 

3 .logo, .introLogo{ float:none; width:100%; text-align:center; } 
二 } 

5 </style> 


修改 后 样式 如 图 14.25 所 示 。 
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write less, do more. 
Your donations heip fund the continued 
development and growth of jQuery. 
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图 14.25 ”width 控制 样式 是 否 独占 一 行 
(3) text-algin 属性 从 文字 端点 对 齐 转 成 文字 居中 对 齐 ， 或 是 从 文字 居中 对 齐 转 成 端 
点 对 齐 ， 因 为 移动 端的 文字 一 般 需 要 居中 显示 ， 而 PC 端的 文字 一 般 需 要 左 对 齐 显示 。 
具体 示例 如 下 。 


本 <style> 

有 @media all and (max-width:768px) { 

= .content-ico, .ft-bookBox{ display : block; 

4 width : 100%; text-align : center; margin-bottom : 30px; } 
5 E 

6 </style> 


修改 后 样式 如 图 14.26 所 示 。 
可 以 看 到 ， 红 色 区 域 的 文本 在 小 于 768px 时 会 居中 显示 ， 而 在 PC 端的 文本 则 会 靠 
左 显 示 。 
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14.26 ”text-algin 控制 文本 居中 显示 

(4) float 属性 从 浮动 转 成 不 浮动 ， 或 是 从 不 浮动 转 成 浮动 ， 因 为 移动 端的 布局 一 般 
为 上 下 结构 ， 而 PC 端的 布局 一 般 为 左右 结构 。 有 具体 示例 如 下 。 

入 <style> 
@media all and (max-width:768px) { 
3 .banner-featureBox{ float : none; width : 100%; } 
4 
2 


} 
</style> 


修改 后 样式 如 图 14.27 所 示 。 


好 


Lightweight Footprint CSS3 Compliant Cross-Browser 


x.Satar 





图 14.27 float 控制 结构 是 否 浮动 


460 


TML5 从 入 门 到 精通 


可 以 看 到 ， 红 色 区 域 的 结构 在 PC 端的 浮动 处 理 ， 从 而 达到 左右 排列 的 效果 。 在 屏 
幕 小 于 768px 时 ， 浮 动 取消 ， 从 而 达到 上 下 排列 的 效果 。 
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<style> 
/*common css*/ 


H 仿 jQuery 官网 的 响应 式 布局 相关 的 CSS 代码 ， 由 于 CSS 代码 较 多 ， 这 里 
CSS 部 分 。 具 体 示例 如 下 。 


/*media css*/ 
@media all and (max-width:768px) { 


.banner-featureBox, .banner-downloadBox, .downloadBox-linkImg, 


.featureWrap, .contentText-introWrap, .contentText-resourceWrap, 


.content-bgico, .ftNav, .copyright, .ftNav-link, 
.copyright-ver span, .copyright-ver a{ float: none; width: 100%; } 
.Copyright-ver, .copyright-intro{ text-align: center; } 
.copyright-introI{ float: none; display: inline-block; } 
.content-ico, .ft-bookBox{ display: block; width: 100%; 


text-align: center; margin-bottom: 30px; } 


@media all and (max-width:730px ) { 


.hd-icoNav{ display: none; } 
.hd-textNav{ float: none; 
/*float: left;*/ 


} 


@media all and (max-width:600px ) { 


.1ogo, .introLogo{ float: none; width: 100%; text-align: center; } 

.logo{ margin-bottom: 20px; } 

-logo-link{ float:none; width: 100%; display: block; 
background-position: center 0; } 

.navbar{ background-color: rgba(0,0,0,0); border:none; 
box-shadow:0 0 0 rgba(0,0,0,0); } 

.navI-link, 

.navI-link:hover{ border:none; box-shadow:0 0 0 rgba(0,0,0,0); } 

.nav, .searchbar, .bookIWrap{ float: none; width: 100%; } 

.searchbar{ margin: 0 0 10px 0; } 

-nav{ padding: 0; } 

-navI-link{ font-size: 14px; padding: 6px 4px; 
font-family: klavika-web, "Helvetica Neue', Helvetica, Arial, 


Geneva, sans-serif; } 


-innerWrap{ border-radius: 10px; } 
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36 -banner{ border-radius: 1l0px 10px 0 0; } 

37 } 

38 @media all and (max-width: 480px) { 

39 -hdWrap, .nav{ display: none; } 

40 -navSel{ display: block; width: 100%; margin-bottom: 10px; } 
41 了 


42 </style> 


14.4 本 章 小 结 


通过 本 章 的 学 习 ， 了 解 移动 端 及 手机 基本 概念 ， 掌 握 移动 端的 布局 方案 ， 除 了 布局 
外 ， 移 动 端 还 涉及 很 多 有 用 的 知识 点 ， 例 如 : 弹性 盒 模型 ， 响 应 式 开发 等 。 本 教材 宗旨 
为 HTML5 入 门 教程 ， 希 望 通过 十 四 章 的 学 习 ， 让 大 家 对 HIMLS 这 门 技术 有 所 了 解 ， 
感谢 大 家 对 本 教材 的 支持 。 





14.5 己 王 
1. 填空 题 
(1) 物理 像素 的 单位 为 ，CSS 像素 的 单位 为 
(2) 在 移动 端 viewport 有 和 两 个 。 
(3) 用 于 添加 在 子 元 素 的 属性 有 、 和 
(4) 属性 定义 盒子 内 部 的 子 元 素 的 排列 方向 。 
(5) 反 向 换行 处 理 时 ，flex-wrap 属性 的 属性 值 为 
2. 选择 题 
(1) 下 列 选项 中 ， 用 来 描述 flex 主轴 对 齐 的 属性 的 是 这 
A. flex-direction B. justify-content 
C. align-items D. align-content 
(2) CSS3 里 面 的 单位 参照 物 为 html 的 font-size 的 单位 是 ( 。”)。 
A. rem B. % 
C. em D. px 
(3) 下 列 选项 中 ， 不 属于 viewport 的 属性 值 的 是 % 
A. width=device-width B. initial-scale=0.5 
C. charset=utf-8 D. user-scalable=no 


(4) 下 列 选项 中 ， 不 属于 flex-direction 的 属性 值 的 是 ( 
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A. row-reverse B. column-reverse 
C. column D. width 
(5) justify-content 属性 取 下 列 哪个 值 时 ， 主 轴 对 齐 方 式 为 两 端 对 齐 。( ) 
A. flex-start B. center 
C. space-between D. space-around 
3. 思考 题 


(1) 请 简 述 屏幕 物理 像素 与 CSS 像素 的 区 别 。 
(2) 请 简 述 rem 单位 的 特点 。 





